Drop shadows
Use drop shadows to add dimension and depth to your design
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
With drop shadows, you can add depth, dimension, and emphasis to your designs. A drop shadow is a visual effect that creates the illusion of an element lifting off the page by adding a shadow that follows the contours of the object. Unlike box shadows, which create rectangular shadows, drop shadows conform to the shape of the element, making them ideal for images with transparent backgrounds or elements with complex shapes.
To apply a drop shadow to an element:
- Select the element to which you want to apply the drop shadow
- Go to Style panel > Effects > Filters
- Click the “plus” icon to add a filter
- Choose “drop shadow” from the Filter dropdown
- Adjust the X offset (the shadow’s horizontal position), Y offset (the shadow’s vertical position), blur, and color as needed
Pro tip: Maintain a consistent light source across your design by using similar offset values for all drop shadows.
Creative applications of drop shadows
- Highlighting images — apply drop shadows to product images or logos to make them stand out on the page
- Text enhancement — use drop shadows on text elements for a subtle lift effect.This is especially effective on light backgrounds.
- Button design — add depth to call-to-action buttons to increase their visual appeal and clickability
- Layered elements — create the illusion of stacked elements by applying drop shadows to overlapping elements