Shadow Settings

Shadow adds a visual depth effect to a block, creating the appearance that it is raised above the page. It can be used to emphasize content, separate elements, or create a sense of layering. 

When to use shadow

Use shadow to create subtle emphasis and visual hierarchy.

Common use cases include:

  • Highlighting important content or calls to action
  • Separating content from the background
  • Creating a sense of depth for grouped elements
  • Adding visual distinction to images, cards, or sections

Shadows are most effective when used sparingly. Overuse can make layouts feel heavy or inconsistent.

Where to find shadow

This is not a standalone block. Shadow settings appear in the block settings sidebar when a supported block is selected. Not all blocks include shadow by default. Availability depends on the block and the design system used on your site.

  • Open the Styles tab in the right sidebar
  • Scroll to the bottom and locate Shadow
  • Click the three-dot (or +) icon next to Shadow
  • Select Shadow to enable the setting

Once enabled, Drop Shadow options will appear for that block.

How to configure

Drop Shadow

Controls the shadow style applied to the block.

  • Click Drop Shadow
  • Choose from the available shadow styles
  • Shadow styles are predefined to maintain visual consistency
  • Available options may vary depending on the site’s design system

Working with containers

Shadow can be applied to container blocks (like Group or Columns), which allows you to create depth around multiple elements at once.

This is especially useful when:

  • Grouping related content into a single visual section
  • Applying a shadow to content that doesn’t support shadow directly

For example:

  • Place an embed (like a video) inside a Group block
  • Apply shadow to the Group block
  • The shadow will appear around the entire container

Tips for editors

Use shadows sparingly

Shadows have a strong visual impact. Use them selectively to highlight key elements rather than applying them broadly.

Stay consistent

Use similar shadow styles across a page or section to maintain a cohesive look.

Avoid stacking effects

Combining shadows with heavy borders, large spacing, or multiple visual treatments can feel overwhelming. Keep styling simple and intentional.

Let the design system guide you

Shadow options are intentionally limited. Use the available styles as guidance for what works best within your site.

  1. WordPress.org Shadow Settings documentation – Please note that your implementation may include customizations that affect available settings or behavior.