Skip to main content
AtomicKit’s effects system gives you two powerful tools for shaping visual hierarchy: an opacity scale for controlling element transparency, and a set of standalone box-shadow presets for adding elevation and depth. Together they let you layer surfaces, signal interactive states, and guide user attention — without writing a single line of custom CSS.

Opacity

A full scale from opacity-0 to opacity-100 in 5% increments. Use for overlays, disabled states, loading indicators, and layered media compositions.

Box Shadow

Outer and inset shadow presets in multiple sizes, plus semantic color variants. Each class is a complete standalone preset — choose one per element.

​
What Ships in Effects

AtomicKit’s effects utilities include the following:
  • Opacity — every 5% step from opacity-0 (fully transparent) through opacity-100 (fully opaque)
  • Outer shadow sizes — shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-panel
  • Outer shadow colors — shadow-primary, shadow-secondary, shadow-neutral, shadow-success, shadow-warning, shadow-error
  • Inset shadow sizes — inset-shadow-sm, inset-shadow-md, inset-shadow-lg, inset-shadow-xl
  • Inset shadow colors — inset-shadow-primary, inset-shadow-secondary, inset-shadow-neutral, inset-shadow-success, inset-shadow-warning, inset-shadow-error
Effects utilities are limited to opacity and shadow. For blur, brightness, contrast, saturation, hue rotation, and color effects like grayscale — see the Filters section.

​
Common Use Cases

Surface layering — stack a semi-transparent element over a background image using opacity-50 paired with a position utility to create overlays and color washes. Disabled and loading states — reduce an interactive element to opacity-60 or opacity-75 to visually communicate that it’s inactive, without removing it from the layout. Elevation and depth cues — use outer shadow presets (shadow-sm through shadow-xl) to lift cards, modals, and dropdowns off the canvas and indicate their position in the layer hierarchy. Recessed controls — use inset shadow presets (inset-shadow-sm through inset-shadow-xl) to make input fields, search wells, and pressed buttons appear sunken into the surface.

​
Accessibility

Reducing opacity also reduces the effective contrast of text and interactive controls. Avoid setting opacity below opacity-75 on any element that contains readable text or actionable UI. If you need to dim a background or media element independently, apply the opacity to a wrapper or pseudo-layer rather than to the entire component including its text.

​
Related Utilities

  • Filters — Blur, brightness, contrast, and color effects for images and decorative layers.
  • Colors — Pair shadow color variants with your design’s semantic color tokens.