Skip to main content
All CollectionsDivi 5Options Groups
Understanding the Box Shadow Design Options in Divi 5
Understanding the Box Shadow Design Options in Divi 5

Learn how to use the Box Shadow options to enhance your module’s design, helping you create a sense of dimension and focus in your layouts.

Updated this week

The Box Shadow design options let you add and customize a shadow effect around the entire module. Shadows can enhance your module's visual appeal by creating depth and highlighting key content.

Divi 5 - Box Shadow Option Group

Where to Find the Box Shadow Options

  1. Open the Module Settings: Click the gear icon or the module itself to access the settings.

  2. Navigate to the Design Tab: Locate the Box Shadow option group.

Box Shadow Customization Settings

  1. Box Shadow Horizontal Position: Adjust the shadow's placement horizontally. Positive values move the shadow to the right, while negative values move it to the left.

  2. Box Shadow Vertical Position: Control the shadow’s vertical placement. Positive values move the shadow downward, and negative values move it upward.

  3. Box Shadow Blur Strength: Define how soft or sharp the shadow appears. Higher values create a wider and softer shadow.

  4. Box Shadow Spread Strength: Adjust the density of the shadow. Increasing the spread makes the shadow darker and more pronounced.

  5. Shadow Color: Select a color for the shadow using your site’s palette or the color picker.

  6. Box Shadow Position: Set the shadow to appear outside or inside the module for different visual effects.

Tips for Using Box Shadow Options

  • Subtle Shadows Work Best: Use light and soft shadows to add depth without overpowering the design.

  • Complement the Module’s Style: Match the shadow's color to your module's background for a natural effect.

  • Experiment with Positioning: Inside shadows can create a recessed look, while outside shadows give the impression of elevation.

The Box Shadow options provide a versatile way to enhance your module’s design, helping you create a sense of dimension and focus in your layouts.

Did this answer your question?