Enhance the visual appeal of your designs by incorporating effects like drop shadow and blur.
Select the element you want to add the effects to
Find Effects in the right sidebar. If you are on a smaller screen you might need to scroll down to localize it.
Vev allows you to infuse your creations with depth and dynamism through four distinct types of effects:
Applying Shadow Effects
Vev offers two types of shadow effects: Drop Shadow and Inner Shadow.
This effect replicates the CSS property, generating a shadow that conforms to the shape of the image itself. This means you can add a shadow to icons without affecting the shadow of the container.
Offset X: Determines the horizontal distance of the shadow. Negative values position the shadow to the left of the element.
Offset Y: Dictates the vertical distance of the shadow. Negative values move the shadow above the element.
Blur: Adjusts the blurriness of the shadow. Larger values result in a more pronounced and blurred shadow.
Color: Specifies the color of the shadow.
Utilizing the CSS property
box-shadow, this effect influences the element's frame, creating a shadow that reflects the container, not its content. The inner shadow exclusively applies a shadow within the bounding box.
Offset X: Controls the horizontal placement of the shadow. Negative values shift the shadow to the left of the element.
Offset Y: Manages the vertical positioning of the shadow. Negative values position the shadow above the element.
Blur: Alters the blurriness of the shadow. Greater values result in a larger and more diffused shadow.
Spread: Positive values expand and enlarge the shadow, while negative values cause it to contract.
Color: Defines the color of the shadow.
Applying Blur Effects
Vev supports two types of blur effects: Layer Blur and Background Blur.
This effect corresponds to the CSS property
filter: blur. It exclusively impacts an element or frame, causing a blurring of its appearance.
Blur Radius: Adjusts the extent of blurring. Increasing the value intensifies the blur effect.
The Background Blur effect applies blurring to the elements situated behind the targeted element or frame. To observe this effect, ensure that the container or its background possesses partial transparency.
Blur Radius: Determines the degree of blurring. Larger values result in a more prominent blur effect.