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

# Opacity and Box Shadow Effect Utilities in AtomicKit

> AtomicKit effects utilities cover a full opacity scale and standalone outer and inset box-shadow presets for depth and visual hierarchy in Elementor.

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.

<CardGroup cols={2}>
  <Card title="Opacity" icon="circle-half-stroke" href="/effects/opacity">
    A full scale from `opacity-0` to `opacity-100` in 5% increments. Use for overlays, disabled states, loading indicators, and layered media compositions.
  </Card>

  <Card title="Box Shadow" icon="layer-group" href="/effects/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.
  </Card>
</CardGroup>

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

<Note>
  Effects utilities are limited to opacity and shadow. For blur, brightness, contrast, saturation, hue rotation, and color effects like grayscale — see the [Filters](/concepts/filters) section.
</Note>

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

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

## Related Utilities

* [Filters](/concepts/filters) — Blur, brightness, contrast, and color effects for images and decorative layers.
* [Colors](/colors) — Pair shadow color variants with your design's semantic color tokens.