All Collections
Vev Components
Creating and managing effects
Creating and managing effects

Adding depth and dynamism to your design with effects in Vev

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Enhance the visual appeal of your designs by incorporating effects like drop shadow and blur.

Adding Effects

  1. Select the element you want to add the effects to

  2. Find Effects in the right sidebar. If you are on a smaller screen you might need to scroll down to localize it.

  3. Vev allows you to infuse your creations with depth and dynamism through four distinct types of effects:

    1. Drop Shadow

    2. Inner Shadow

    3. Blur

    4. 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.

Applyin 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.

Did this answer your question?