Box Shadow

Standalone outer and inset shadow presets for elevation, recessed depth, and semantic emphasis.

Overview

Box shadow utilities give surfaces visible depth. Use outer shadows when an element should feel lifted above the canvas, and inset shadows when a surface should feel pressed inward or recessed.

In the current plugin, each shadow utility is a full box-shadow preset. Elementor applies shadow values as one complete property payload, so shadow size classes and shadow color classes do not merge together.

• Size classes work on their own.
• Color classes work on their own.
• Colored outer shadow classes use the shadow-md geometry.
• Colored inset shadow classes use the inset-shadow-md geometry.

Pattern	Supported classes	What it controls
shadow-<size>	shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-panel	Standalone neutral outer shadow presets
shadow-<color>	shadow-primary, shadow-secondary, shadow-neutral, shadow-success, shadow-warning, shadow-error	Standalone colored outer shadow presets using the shadow-md size
inset-shadow-<size>	inset-shadow-sm, inset-shadow-md, inset-shadow-lg, inset-shadow-xl	Standalone neutral inset shadow presets
inset-shadow-<color>	inset-shadow-primary, inset-shadow-secondary, inset-shadow-neutral, inset-shadow-success, inset-shadow-warning, inset-shadow-error	Standalone colored inset shadow presets using the inset-shadow-md size

Examples

Outer shadow sizing

Use the outer shadow scale when cards, promos, drawers, or floating actions need clearer separation from the page.

<div class="elementor-element flex flex-col gap-4 w-full">
  <div class="shadow-sm rounded-xl bg-white p-6">Quiet utility card</div>
  <div class="shadow-md rounded-xl bg-white p-6">Default content panel</div>
  <div class="shadow-lg rounded-xl bg-white p-6">Featured surface</div>
</div>

Coloring outer shadows

Use the colored outer presets when the shadow itself should reinforce a semantic state. These classes are complete shadow presets built on the default shadow-md geometry, not color-only add-ons.

<div class="elementor-element flex flex-wrap gap-4 items-center">
  <button class="shadow-primary rounded-xl bg-primary text-white px-6 py-3">
    Launch campaign
  </button>
  <button class="shadow-success rounded-xl bg-success text-white px-6 py-3">
    Publish changes
  </button>
  <button class="shadow-warning rounded-xl bg-warning text-black px-6 py-3">
    Send for review
  </button>
</div>

Inset shadow sizing

Use inset shadows when an area should feel carved into the interface, like search wells, trays, and pressed controls.

<div class="elementor-element flex flex-col gap-4 w-full">
  <div class="inset-shadow-sm rounded-xl bg-gray-light p-5">Soft inset field</div>
  <div class="inset-shadow-md rounded-xl bg-gray-light p-5">Default inset well</div>
  <div class="inset-shadow-lg rounded-xl bg-gray-light p-5">Deep inset panel</div>
</div>

Coloring inset shadows

Inset shadow colors are useful when a recessed surface should still communicate focus, state, or meaning. These classes are complete inset presets built on the default inset-shadow-md geometry, not overlays on top of a neutral inset size.

<div class="elementor-element flex flex-col gap-4 w-full">
  <div class="inset-shadow-primary rounded-xl bg-white p-5">
    Current search field
  </div>
  <div class="inset-shadow-neutral rounded-xl bg-white p-5">
    Quiet filter tray
  </div>
  <div class="inset-shadow-error rounded-xl bg-white p-5">
    Validation message well
  </div>
</div>

Usage Notes

• Use outer shadows for lifted surfaces such as cards, action clusters, banners, and overlays.
• Use inset shadows for recessed controls, trays, wells, and pressed states.
• Choose a single shadow preset per element. Do not stack a shadow size class with a shadow color class in the current plugin.
• Treat colored shadow presets as the semantic version of shadow-md or inset-shadow-md, not as add-on color layers.
• Keep colored shadows intentional. They work best on key actions, status-driven UI, and a small number of highlighted surfaces.
• Pair shadows with radius and background utilities so the depth feels tied to a real surface.

Best Practices

• Prefer the smaller shadow sizes for dense content and reserve shadow-lg, shadow-xl, and shadow-panel for isolated emphasis.
• Use semantic shadow colors to reinforce a meaning that already exists in the UI, not to decorate every surface.
• Inset shadows work best when the background already suggests a contained surface such as bg-white or bg-gray-light.
• Check strong shadow colors in both light and dark contexts so they still read as depth instead of glow.

Related Utilities

Opacity

Pair shadow and opacity for layered states

Borders

Pair shadow presets with border radius and border styles