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.
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.
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 |
<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 |
<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 |
<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 |
<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 — Layer transparent elements to complement shadow depth effects.
- Border Width — Combine borders with shadows to define surface edges clearly.
