How to Add a Drop Shadow to an Image in Webflow
In this article
This guide will walk you through the process of adding a drop shadow to an image in Webflow. You'll learn how to select an image, access its style settings, and apply a box shadow effect with a custom color.
Explore more Webflow tutorials with interactive Saltfish walkthroughs.
Here's how to add a drop shadow to an image in Webflow
- Select the Image
Begin by clicking on the image element directly within your Webflow design canvas. This action will highlight the image and make its properties editable in the right-hand panel.
- Open the Style Panel
With the image selected, navigate to the right-hand sidebar. Click on the "Style" tab, which is typically located alongside "Settings" and "Interactions," to access all the visual styling options for your image.
- Expand Effects Settings
Within the Style panel, scroll down until you find the "Effects" section. Click on its header to expand the section and reveal various visual effects, including shadows.
- Add a Box Shadow
Inside the expanded "Effects" section, locate the "Box shadows" option. Click the plus (+) icon next to it to add a new box shadow effect to your selected image.
- Choose Shadow Color
After adding the box shadow, click the color swatch located next to the "Color" setting. A color picker panel will appear, allowing you to select your desired color for the shadow.
Your turn to show how it works.
Build a walkthrough of your product with Saltfish, then share it with your customers.
Frequently Asked Questions
The "Style" tab is located in the right-hand sidebar of the Webflow designer interface, positioned next to the "Settings" and "Interactions" tabs.
Webflow
