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

# AtomicKit Opacity Scale: opacity-0 Through opacity-100

> Control element transparency in Elementor using AtomicKit opacity classes from opacity-0 to opacity-100 for overlays, disabled states, and layering.

AtomicKit ships a complete opacity scale that lets you dial the transparency of any Elementor element from fully invisible to fully opaque. Whether you're building a dark overlay behind a modal, dimming a disabled button, or creating a layered media composition, you have a precise value for every use case without reaching for custom CSS.

## Full Opacity Scale

AtomicKit ships every 5% step from `opacity-0` through `opacity-100` — 21 values in total. All classes map directly to the CSS `opacity` property.

| Class          | Opacity Value | CSS Property    |
| -------------- | ------------- | --------------- |
| `.opacity-0`   | 0%            | `opacity: 0`    |
| `.opacity-5`   | 5%            | `opacity: 0.05` |
| `.opacity-10`  | 10%           | `opacity: 0.1`  |
| `.opacity-15`  | 15%           | `opacity: 0.15` |
| `.opacity-20`  | 20%           | `opacity: 0.2`  |
| `.opacity-25`  | 25%           | `opacity: 0.25` |
| `.opacity-30`  | 30%           | `opacity: 0.3`  |
| `.opacity-35`  | 35%           | `opacity: 0.35` |
| `.opacity-40`  | 40%           | `opacity: 0.4`  |
| `.opacity-45`  | 45%           | `opacity: 0.45` |
| `.opacity-50`  | 50%           | `opacity: 0.5`  |
| `.opacity-55`  | 55%           | `opacity: 0.55` |
| `.opacity-60`  | 60%           | `opacity: 0.6`  |
| `.opacity-65`  | 65%           | `opacity: 0.65` |
| `.opacity-70`  | 70%           | `opacity: 0.7`  |
| `.opacity-75`  | 75%           | `opacity: 0.75` |
| `.opacity-80`  | 80%           | `opacity: 0.8`  |
| `.opacity-85`  | 85%           | `opacity: 0.85` |
| `.opacity-90`  | 90%           | `opacity: 0.9`  |
| `.opacity-95`  | 95%           | `opacity: 0.95` |
| `.opacity-100` | 100%          | `opacity: 1`    |

## Code Examples

**Overlay on an image — darken a background behind text or UI:**

```html theme={null}
<div class="relative">
  <!-- Background image container -->
  <div class="absolute opacity-50 background-black">
    <!-- Semi-transparent black layer over the image -->
  </div>
  <div class="relative">
    <!-- Content sits above the overlay -->
  </div>
</div>
```

**Disabled button state — visually mute an inactive control:**

```html theme={null}
<div class="opacity-60">
  <!-- Button or form control in a disabled or loading state -->
</div>
```

**Subtle hover tint — light background wash over a card:**

```html theme={null}
<div class="opacity-10 background-primary">
  <!-- Very light primary color fill for hover or selected states -->
</div>
```

## Best Practices

<Steps>
  <Step title="Use low opacity for overlays and media dimming">
    Values in the `opacity-10` to `opacity-50` range work well for color washes, image overlays, and decorative background layers. They let the content underneath show through while shifting the visual tone.
  </Step>

  <Step title="Use mid opacity for disabled and loading states">
    Values in the `opacity-60` to `opacity-75` range clearly communicate that a component is temporarily inactive. The element remains visible and understandable, just visually de-emphasized.
  </Step>

  <Step title="Scope opacity to the right layer">
    Apply opacity to a wrapper or background layer rather than the entire component when you only want to dim the background. This keeps text and interactive elements at full contrast while the decorative layer fades.
  </Step>

  <Step title="Avoid overusing transparency">
    Too many transparent layers stacked on top of one another can produce muddy, hard-to-read interfaces. If you find yourself using opacity to compensate for a color that's too strong, adjust the color token instead.
  </Step>
</Steps>

## Accessibility

<Warning>
  Do not apply `opacity` values below `opacity-75` to elements that contain body text, labels, or interactive controls. Reduced opacity lowers the effective contrast ratio between text and its background, which can fail WCAG contrast requirements and make content unreadable for users with low vision. Use opacity on decorative, background, or media layers only.
</Warning>

## Related Utilities

* [Box Shadow](/effects/box-shadow) — Add elevation and depth without affecting transparency.
* [Colors](/colors) — Use color tokens instead of opacity to achieve lighter fills and tints.