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.