You can add depth and visual interest to your design by applying effects like shadows and blurs. Be mindful not to overuse effects, as they can slow down your project's performance.
Applying Effects to an Element
To add an effect to an element, follow these steps:
Select the Element: Click the element on your canvas that you want to apply an effect to.
Access the Style Panel: Go to the right-side panel and scroll down to the "Effects" section.
Choose an Effect: Click the plus icon to add a new effect and choose from the following four options:
Drop Shadow
Inner Shadow
Layer Blur
Background Blur
Shadow Effects
Vev offers two types of shadow effects to create depth and dimension.
Drop Shadow: This effect adds a shadow around the element, making it appear as if it is floating above the page. You can customize the following properties:
Offset X: Controls the horizontal position of the shadow. Use a negative value to move it to the left.
Offset Y: Controls the vertical position of the shadow. Use a negative value to move it upwards.
Blur: Adjusts the blurriness of the shadow. Higher values create a softer, more blurred shadow.
Color: Sets the color of the shadow.
Inner Shadow: This effect adds a shadow inside the element's frame, giving it an indented or recessed appearance. You can customize the following properties:
Offset X: Controls the horizontal position of the shadow.
Offset Y: Controls the vertical position of the shadow.
Blur: Adjusts the blurriness.
Spread: Controls the size of the shadow. A positive value makes it larger, and a negative value makes it smaller.
Color: Sets the color of the inner shadow.
Blur Effects
Vev provides two types of blur effects to soften elements or create a frosted glass look.
Layer Blur: This effect blurs the element itself, including any content within it. You can adjust the intensity of the blur using the Blur Radius.
Background Blur: This effect blurs any elements or content that are positioned behind the selected element. The element itself remains sharp. You can adjust the intensity of the background blur using the Blur Radius. The element with the background blur effect applied needs to be set up with pixel values, and the fill colors' opacity needs to be less the 100% in order to display the effect.