Box shadow options in Divi allow you to give any item on the page the illusion of depth.

Projected shadows are a creative way to bring your website design elements to life. They can highlight elements and even give a great 3D effect.

In this guide, we will explore all the box shadow options available in Divi, how to use them, and the best tips and practices.

How Box Shadows Work

Box shadows are a unique design property that does not take up real space on the page (or HTML DOM).

When you add a box shade to an element in Divi, the shadow is applied around the element as an edge.

However, unlike an edge, shadow is not part of the CSS box model, which controls the total size of an element (high and wide) including its content, filling and edge. In short, this means that adding a box shadow will not affect the size or space of the item on your page.

Where to Find Box Shadow Settings

Box Shadow Styles Built-in Divi

Customizing the Box Shadow

Horizontal Position of Box Shadow

• A positive value places the shadow to the right of the element.

• A negative value places the shadow to the left of the element.

Drag the slider or enter a numerical value into the field to adjust this setting.

Vertical Box Shadow Position

• A positive value places the shadow underneath the element.

• A negative value places the shadow on top of the element.

Drag the slider or enter a numerical value into the field to adjust this setting.

Box Shadow Blur Force

• The greater the value, the greater the blur, which makes the shadow wider and clearer.

• The lower the value, the shadow will be darker and narrower.

Drag the slider or enter a numeric value into the field to adjust this setting.

Box Shadow Expansion Force

• The higher the value, the higher the density of the shadow, resulting in a more intense shadow.

Drag the slider or enter a numeric value into the field to adjust this setting.

Color of Shadow

• Saved color palette

• Global colors

• Recent colors

• Or use the dropper icon to select a new color.

By clicking on the dropper, you can enter a hexadecimal value for the color code or drag the dropper to find a new color. We recommend establishing a low opacity for your colors to create that soft box shadow effect.

Box Shadow Position

• Outer: Place the shadow out of the element.

• Inside: Place the shadow inside the element.
  

When adjusting the box shadow values, the pixels will be the default unit. However, you can use other CSS drives by manually entering them in the field of each property. Allowed units include:

• px (pixels)

• vw (relative to the width of the browser window)

• vh (relative to browser window height)

• em (relative to the font size of the item)

• %

• vmin

• vmax

Box Shadow with Rounded Corners

Tips and Good Practices for Box Shadow

• Use box shadows with edges
  Applying a box edge and shadow to an element creates two creative layers to frame the content.

• Dimensional effect
  Use the box shadow to create 3D depth in your design elements. Increase blur and expansion to give the illusion that the object is closer to the viewer, and reduce them to make it look further.

• Ensures visibility of shadows with horizontal and vertical overflow
  In some cases, you may not see the outer shadow of an element. If this happens, in Advanced → Visibility, make sure that horizontal and vertical overflow is set as visible when using an outer shadow; otherwise, it will be hidden.

• Use low opacity colors to illustrate depth
  Use a color with subtle opacity to show depth in the shade. You can lower the opacity of any shade color using the built-in color management system.

• Frame content without taking up space
  

• In web design, one technique for organizing content is to use edges around the elements. But it is important to remember that the edges take up pixel space, and by reducing the size of the browser window, the edge can limit the width of the container content.

• Box shadows do not take up room on the page, so they do not affect the resizing of content when the window gets smaller. To see how the content changes with a large edge and how it stays the same with a box shadow, watch the attached video.

• Frame content creatively
  You can use box shadows creatively to highlight important content and make the elements stand out. See examples for inspiration.

• Stone Factory Design Package
  

• Hostel design package

  

• Interior Design Design Package

Continue Learning

• How to add box shadows on one side to design elements in Divi

• How to create "floating" objects in Divi using projected shadow

• How to use box shadows as sliding backgrounds when hovering the cursor

• How to combine picture background and box shadow options with Divi