> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Shadow

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

export const InsetShadowColorDemo = () => {
  const cards = [{
    label: "inset-shadow-primary",
    className: "inset-shadow-primary",
    title: "Focused input",
    tone: "sk-shadow-well--primary",
    copy: "Primary-tinted inset depth for active or current controls."
  }, {
    label: "inset-shadow-neutral",
    className: "inset-shadow-neutral",
    title: "Muted filter",
    tone: "sk-shadow-well--neutral",
    copy: "Neutral inset framing for quiet interface wells."
  }, {
    label: "inset-shadow-error",
    className: "inset-shadow-error",
    title: "Validation state",
    tone: "sk-shadow-well--error",
    copy: "A recessed error treatment that still feels integrated."
  }];
  return <div className="not-prose my-6 sk-shadow-demo sk-shadow-demo--always-light">
      <div className="tw-demo-light">
        <div className="sk-shadow-demo-grid sk-shadow-demo-grid--three">
          {cards.map(card => <div key={card.label} className="sk-shadow-demo-item">
              <span className="tw-label">{card.label}</span>
              <div className="sk-shadow-demo-stage">
                <div className={`sk-shadow-well ${card.tone} ${card.className}`}>
                  <div className="sk-shadow-well__row">
                    <span className="sk-shadow-well__label">{card.title}</span>
                    <span className="sk-shadow-well__pill">Active</span>
                  </div>
                  <p className="sk-shadow-surface__copy">{card.copy}</p>
                </div>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

export const InsetShadowSizingDemo = () => {
  const cards = [{
    label: "inset-shadow-sm",
    className: "inset-shadow-sm",
    title: "Quiet field",
    copy: "Light inset edge for subtle depth without a heavy recess."
  }, {
    label: "inset-shadow-md",
    className: "inset-shadow-md",
    title: "Default well",
    copy: "A balanced recessed treatment for search boxes or filters."
  }, {
    label: "inset-shadow-lg",
    className: "inset-shadow-lg",
    title: "Deep tray",
    copy: "Stronger inset depth for wells, shelves, and contained media frames."
  }, {
    label: "inset-shadow-xl",
    className: "inset-shadow-xl",
    title: "Pressed shelf",
    copy: "A strong recessed preset for trays and prominent contained surfaces."
  }];
  return <div className="not-prose my-6 sk-shadow-demo sk-shadow-demo--always-light">
      <div className="tw-demo-light">
        <div className="sk-shadow-demo-grid sk-shadow-demo-grid--three">
          {cards.map(card => <div key={card.label} className="sk-shadow-demo-item">
              <span className="tw-label">{card.label}</span>
              <div className="sk-shadow-demo-stage">
                <div className={`sk-shadow-well ${card.className}`}>
                  <p className="sk-shadow-surface__eyebrow">Inset depth</p>
                  <h3 className="sk-shadow-surface__title">{card.title}</h3>
                  <p className="sk-shadow-surface__copy">{card.copy}</p>
                </div>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

export const BoxShadowColorDemo = () => {
  const cards = [{
    label: "shadow-primary",
    className: "shadow-primary",
    title: "Launch CTA",
    badge: "Primary",
    tone: "sk-shadow-surface--primary"
  }, {
    label: "shadow-success",
    className: "shadow-success",
    title: "Published",
    badge: "Success",
    tone: "sk-shadow-surface--success"
  }, {
    label: "shadow-warning",
    className: "shadow-warning",
    title: "Needs review",
    badge: "Warning",
    tone: "sk-shadow-surface--warning"
  }];
  return <div className="not-prose my-6 sk-shadow-demo">
      <div className="tw-demo-light">
        <div className="sk-shadow-demo-grid sk-shadow-demo-grid--three">
          {cards.map(card => <div key={card.label} className="sk-shadow-demo-item">
              <span className="tw-label">{card.label}</span>
              <div className="sk-shadow-demo-stage sk-shadow-demo-stage--center">
                <button className={`sk-shadow-surface sk-shadow-surface--action ${card.tone} ${card.className}`} type="button">
                  <span className="sk-shadow-surface__badge">{card.badge}</span>
                  <span className="sk-shadow-surface__title">{card.title}</span>
                </button>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

export const BoxShadowSizingDemo = () => {
  const cards = [{
    label: "shadow-sm",
    className: "shadow-sm",
    title: "Compact card",
    copy: "Subtle lift for dense lists, inputs, and helper panels."
  }, {
    label: "shadow-md",
    className: "shadow-md",
    title: "Default surface",
    copy: "Balanced elevation for everyday cards and sections."
  }, {
    label: "shadow-lg",
    className: "shadow-lg",
    title: "Feature block",
    copy: "Stronger depth for highlighted content and floating blocks."
  }, {
    label: "shadow-xl",
    className: "shadow-xl",
    title: "Raised promo",
    copy: "Large standalone depth for featured promos and callout surfaces."
  }, {
    label: "shadow-panel",
    className: "shadow-panel",
    title: "Floating panel",
    copy: "Large panel depth for overlays, pricing modules, or hero callouts."
  }];
  return <div className="not-prose my-6 sk-shadow-demo sk-shadow-demo--always-light">
      <div className="tw-demo-light">
        <div className="sk-shadow-demo-grid sk-shadow-demo-grid--three">
          {cards.map(card => <div key={card.label} className="sk-shadow-demo-item">
              <span className="tw-label">{card.label}</span>
              <div className="sk-shadow-demo-stage">
                <article className={`sk-shadow-surface ${card.className}`}>
                  <p className="sk-shadow-surface__eyebrow">Surface</p>
                  <h3 className="sk-shadow-surface__title">{card.title}</h3>
                  <p className="sk-shadow-surface__copy">{card.copy}</p>
                </article>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## 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.

<BoxShadowSizingDemo />

```html theme={null}
<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.

<BoxShadowColorDemo />

```html theme={null}
<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.

<InsetShadowSizingDemo />

```html theme={null}
<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.

<InsetShadowColorDemo />

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Opacity" icon="circle-half-stroke-horizontal" href="/effects/opacity">
    Pair shadow and opacity for layered states
  </Card>

  <Card title="Borders" icon="square" href="/concepts/borders">
    Pair shadow presets with border radius and border styles
  </Card>
</CardGroup>