Enhance the visual appeal of your designs by incorporating effects like drop shadow and blur.
Adding Effects
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:
Drop Shadow
Inner Shadow
Blur
Background Blur
Note: It's important to exercise discretion when using effects extensively, as an excessive number of effects on elements and frames may impact the speed and overall performance of your pages.
Applying Shadow Effects
Vev offers two types of shadow effects: Drop Shadow and Inner Shadow.
Drop 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.
Parameters
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.
Inner 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.
Parameters
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.
Layer Blur
This effect corresponds to the CSS property filter: blur. It exclusively impacts an element or frame, causing a blurring of its appearance.
Parameters
Blur Radius: Adjusts the extent of blurring. Increasing the value intensifies the blur effect.
Background Blur
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.
Parameters:
Blur Radius: Determines the degree of blurring. Larger values result in a more prominent blur effect.