All Collections
Vev Components
Creating and managing effects
Creating and managing effects
Adding dropshadows and blur effects to elements
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Create more depth and dynamism to your design with effects like drop shadow and blur.

Effects will let you add four types of effects:

  • Drop shadow

  • Inner shadow

  • Blur

  • Background blur

Note: Adding a large number of effects to elements and frames can affect page speed & performance.

Shadows

You can add two types of shadow effects in Vev: Drop shadow and Inner shadow.

Drop shadow translates to the CSS property, while the Inner shadow translates to box-shadow.

Drop Shadow

Drop shadow creates a shadow that conforms to the shape of the image itself, which means that you can add shadow to icons without it creating shadow to the container itself.

Parameters:

  • Offset X: The horizontal distance, where negative values place the shadow to the left of the element

  • Offset Y: The vertical distance, where negative values place the shadow above the element

  • Blur: The larger the value, the larger and more blurred the shadow becomes

  • Color: The color of the shadow

Inner Shadow

The CSS property box-shadow creates a shadow that affects an element’s frame, which means it will create a shadow reflecting the container and not its content. Inner shadow only applies a shadow inside of the bounding box.

Parameters:

  • Offset X: The horizontal distance, where negative values place the shadow to the left of the element

  • Offset Y: The vertical distance, where negative values place the shadow above the element

  • Blur: The larger the value, the larger and more blurred the shadow becomes

  • Spread: Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink

  • Color: The color of the shadow

Blur

You can add two types of blur effects: Blur and Background blur.

Blur translates to the CSS property filter: blur while background blur translates to backdrop-filter: blur.

Blur

Adding a blur will only affect an element or frame and cause it to blur its appearance.

Parameters

  • Blur radius: The larger value will create more blur

Background Blur

The Background blur applies a blur to everything which is behind the element or frame. To see the effect you must make the container or its background at least partially transparent.

Parameters

  • Blur radius: The larger value will create more blur

Note: Firefox does not support background blur.

Did this answer your question?