Drop Shadows are a creative way to bring your website design elements to life. They can highlight elements and even give a cool 3d effect.
In this guide, we'll explore all the box shadow options available within Divi, how to use them, and the best tips and practices.
How Box Shadows Work
Box Shadows apply vertical and horizontal shadows to design elements. You can add box shadows to sections, rows, columns, and modules.
Box Shadows is a unique design property that doesn't take up actual space on the page (or HTML DOM).
When you add a Box Shadow to an element in Divi, the shadow is applied around the element like a border.
However, unlike a border, the shadow is not a part of the CSS Box Model, which controls an element's overall size (height and width) by including its content, padding, and border. In short, this means that adding a box shadow won't affect the size or spacing of the element on your page.
In the image above, notice how the border takes up actual space in the DOM. It shrinks the amount of available space for the inside content. However, on the right, the box shadow isn't a factor in the module's size and will display without moving any other elements around it.
Where To Find Box Shadow Settings
Box Shadow settings are always located under the Design tab in any Section, Row, Column, or Module you are working on. Navigate to the Box Shadow settings group and click to expand the options.
Divi's Built-In Box Shadow Styles
Divi makes adding Box Shadows to your design elements easy because it comes with 7 built-in shadow styles that you can apply to any element with the click of a button.
Customizing the Box Shadow
These built-in box shadow styles are a great starting point; however, with Divi, it's easy to customize any box shadow to fit your vision. Let's take a look at the custom box shadow options.
Box Shadow Horizontal Position
This defines the horizontal distance of the shadow from the element.
A positive value places the shadow on the element's right
A negative value places the shadow on the element's right
Drag and drop the range slider or input a numerical value in the input field to adjust this setting.
Box Shadow Vertical Position
This defines the vertical distance of the shadow from the element.
A positive value places the shadow below the element
A negative value places the shadow below the element
Drag and drop the range slider or input a numerical value in the input field to adjust this setting.
Box Shadow Blur Strength
This defines the strength (intensity) of the blur.
The higher the value, the bigger the blur becomes, which makes the shadow wider and lighter.
The lower the value, the darker and narrower the shadow becomes.
Drag and drop the range slider or input a numerical value in the input field to adjust this setting.
Box Shadow Spread Strength
This defines the spread strength (density) of the box shadow.
The higher the value, the higher the density of the shadow, resulting in a more intense shadow.
Drag and drop the range slider or input a numerical value in the input field to adjust this setting.
Shadow Color
You can also adjust the color of the shadow. You can choose from your:
Saved color palette
Global colors
Recent colors
Or use the eyedropper icon to find a new color. Once you click the eyedropper icon, you can input a hex value for the color code you want or drag the dropper to find a new color. We recommend setting a light opacity to your colors to create that softbox shadow effect.
Box Shadow Position
There are two options for the box shadow position:
Outer - places the box shadow on the outside of the element
Inner - places the box shadow inside the element
Box Shadow Length Units
When adjusting the values of the box shadow, pixels (px) will be the default length unit used. However, you can use other CSS length units by entering them manually into the input box for each property value. Common length units that are allowed include:
px(pixels)vw(relative to browser viewport width)vh(relative to browser viewport height)em(relative to the element's font size)
Some length units are NOT allowed. These include:
%vminvmax
Box Shadow with Rounded Corners
If you have a design element that has rounded corners, the box shadow will take on the same rounded corners.
Box Shadow Tips and Best Practices
Use Box Shadows with Borders
Applying a border AND box shadow to an element creates two layers of creative design for framing content.
Dimensional Effect
Use a box shadow to create 3d depth for your design elements. Increase the blur and spread strength to create the illusion that the object is closer to the viewer, and decrease the blur and spread strength to make the object appear farther from view.
Ensure Visibility of Box Shadows with Horizontal and Vertical Overflow
In some instances, you may not be able to see the outer box shadow of an element. If this is the case, in Advanced → Visibility, make sure the horizontal and vertical overflows are set to visible when you have a box shadow with an outer shadow. Otherwise, they will be hidden.
Use Low Opacity Colors for Box Shadows to Illustrate Depth
Use a subtle opacity color to illustrate depth in a box shadow. You can lower the opacity of any shadow color using Divi's built-in color management system.
Frame Content Without Taking Up Space
Regarding web design, one technique to organize your content is using borders around your design elements. But it's important to remember that borders can take up pixel space in your web design, and when the browser window is resized to a smaller width, the border can limit the container's content width.
Box shadows do not occupy any space on the page, so they do not affect the resizing of your content as the window gets smaller. To see how the size of the content changes when a larger border is added and how the size of the content remains the same when a box shadow is added, please watch the video below.
Frame Content In Creative Ways
You can use box shadows creatively to highlight important content and make elements stand out. See examples for inspiration.
Example: Stone Factory Layout Pack
Example: Hostel Layout Pack
Example: Interior Design Layout Pack