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

# Box Shadow Presets for Elevation and Depth in AtomicKit

> Add elevation and depth to Elementor elements using AtomicKit outer and inset shadow presets, with semantic color variants for status-driven UI.

AtomicKit ships standalone box shadow presets — each class is a complete shadow definition that includes spread, blur, offset, and color in one utility. Outer shadow presets lift surfaces off the canvas to communicate elevation; inset shadow presets push surfaces inward to create recessed wells, trays, and pressed states. Because every preset is self-contained, you get consistent, production-ready shadows without configuring any values by hand.

<Warning>
  **Use one shadow class per element.** Shadow size classes (e.g., `shadow-md`) and shadow color classes (e.g., `shadow-primary`) are not designed to be combined. Each is a complete, standalone preset. Stacking them on the same element will produce unexpected results. Choose the one class that best fits your use case.
</Warning>

## Outer Shadow Sizes

Outer shadows lift an element visually off the background. Use lighter shadows for dense UI components and heavier shadows for focal points and overlapping surfaces.

| Class           | Best For                                                                    |
| --------------- | --------------------------------------------------------------------------- |
| `.shadow-sm`    | Subtle lift — dense lists, form inputs, tight grid items                    |
| `.shadow-md`    | Balanced elevation — everyday cards, product tiles, content blocks          |
| `.shadow-lg`    | Stronger depth — highlighted or featured content within a layout            |
| `.shadow-xl`    | Large standalone depth — featured promos, hero cards, call-to-action panels |
| `.shadow-panel` | Full panel depth — overlapping modals, pricing modules, flyout panels       |

```html theme={null}
<div class="shadow-md rounded-lg">
  <!-- Standard card with balanced elevation -->
</div>

<div class="shadow-xl rounded-xl">
  <!-- Featured promo card with strong depth -->
</div>
```

## Colored Outer Shadows

Color shadow presets use the same geometry as `shadow-md` but tint the shadow with a semantic color. Use them to reinforce meaning alongside status indicators, alerts, or branded elements.

| Class               | Use Case                                                             |
| ------------------- | -------------------------------------------------------------------- |
| `.shadow-primary`   | Brand-colored elevation for featured or active elements              |
| `.shadow-secondary` | Secondary brand accent for supporting highlights                     |
| `.shadow-neutral`   | Neutral toned glow for subtle decorative depth                       |
| `.shadow-success`   | Confirmation states — success messages, completed steps              |
| `.shadow-warning`   | Caution states — warnings, review-required indicators                |
| `.shadow-error`     | Error states — validation failures, destructive action confirmations |

```html theme={null}
<div class="shadow-success rounded-lg">
  <!-- Success card or confirmation panel with green-tinted depth -->
</div>

<div class="shadow-error rounded-lg">
  <!-- Error state component with red-tinted shadow -->
</div>
```

## Inset Shadow Sizes

Inset shadows reverse the depth direction, making an element look recessed into the page rather than lifted off it. They're ideal for input fields, search bars, and any control that should appear sunken or pressed.

| Class              | Best For                                                       |
| ------------------ | -------------------------------------------------------------- |
| `.inset-shadow-sm` | Light well — subtle depth on text inputs or segmented controls |
| `.inset-shadow-md` | Balanced inset — search fields, select dropdowns, text areas   |
| `.inset-shadow-lg` | Deeper well — trays, slots, and inactive tab backgrounds       |
| `.inset-shadow-xl` | Strong inset — pressed button states, deep tray containers     |

```html theme={null}
<div class="inset-shadow-md rounded">
  <!-- Search input field with a recessed appearance -->
</div>

<div class="inset-shadow-xl rounded-lg">
  <!-- Pressed or active button state -->
</div>
```

## Colored Inset Shadows

Colored inset shadows apply semantic tinting to the `inset-shadow-md` geometry. Use them to highlight the current state of interactive controls.

| Class                     | Use Case                                              |
| ------------------------- | ----------------------------------------------------- |
| `.inset-shadow-primary`   | Active input or focused field in brand color          |
| `.inset-shadow-secondary` | Secondary-themed well or tray                         |
| `.inset-shadow-neutral`   | Neutral recessed depth for general-purpose containers |
| `.inset-shadow-success`   | Valid input or confirmed selection                    |
| `.inset-shadow-warning`   | Input requiring attention                             |
| `.inset-shadow-error`     | Invalid input or error field state                    |

```html theme={null}
<div class="inset-shadow-error rounded">
  <!-- Text input with failed validation — red-tinted inset shadow -->
</div>
```

## Best Practices

* **Start lighter than you think you need.** `shadow-sm` and `shadow-md` handle the majority of card and container use cases. Reserve `shadow-xl` and `shadow-panel` for elements that genuinely need to float above the rest of the layout.
* **Match shadow weight to element size.** Small, dense components like inputs and tags look best with `shadow-sm`. Large, standalone panels suit `shadow-xl` or `shadow-panel`.
* **Use inset shadows for interactive depth.** If a component accepts input or has a pressed state, an inset shadow reinforces that affordance more clearly than a flat background alone.
* **Use colored shadows sparingly.** A `shadow-error` on a validation field is effective because it's rare. If every card has `shadow-primary`, the semantic meaning is lost.
* **Never stack size and color shadow classes.** Each class is a complete preset. Applying both `shadow-md` and `shadow-primary` to the same element will not produce a mid-sized primary-colored shadow — one will override the other.

## Related Utilities

* [Opacity](/effects/opacity) — Layer transparent elements to complement shadow depth effects.
* [Border Width](/borders/width) — Combine borders with shadows to define surface edges clearly.