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