> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Opacity

> Use the bundled opacity scale for overlays, states, and layered interfaces.

export const OpacityDemo = () => {
  const levels = [{
    cls: "opacity-100",
    val: 1
  }, {
    cls: "opacity-75",
    val: 0.75
  }, {
    cls: "opacity-50",
    val: 0.5
  }, {
    cls: "opacity-25",
    val: 0.25
  }, {
    cls: "opacity-0",
    val: 0
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="flex gap-4 justify-center">
          {levels.map(o => <div key={o.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{o.cls}</span>
              <button type="button" style={{
    opacity: o.val,
    padding: "0.625rem 1.5rem",
    borderRadius: "0.5rem",
    fontSize: "0.875rem",
    fontWeight: 600,
    background: "#6366f1",
    color: "#ffffff",
    border: "none",
    boxShadow: "0 4px 6px rgba(0,0,0,0.2)"
  }}>Button</button>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

The bundle ships every 5% step from **`opacity-0`** through **`opacity-100`** for overlays, disabled states, and layered interfaces.

| Class          | Value | CSS              |
| -------------- | ----- | ---------------- |
| `.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;`    |

## Example

<OpacityDemo />

## Best Practices

<Warning>
  Ensure text remains readable when opacity reduces contrast. Decorative overlays can go low; body text usually should not.
</Warning>

<Steps>
  <Step title="Use Lower Values for Overlays">
    `opacity-10` through `opacity-50` work well for dimming media or stacking panels.
  </Step>

  <Step title="Use Higher Values for State Changes">
    `opacity-60` through `opacity-95` can suggest disabled or loading states while keeping content visible.
  </Step>

  <Step title="Avoid Overusing Transparency">
    Too many translucent layers can make interfaces feel muddy and hard to read.
  </Step>

  <Step title="Pair With Positioning">
    Overlays usually combine opacity with `.relative`, `.absolute`, or `.fixed`.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Effects Overview" icon="sparkles" href="/concepts/effects">
    Overview of the currently shipped effects surface
  </Card>

  <Card title="Colors" icon="palette" href="/concepts/colors">
    Color utilities that work with opacity
  </Card>
</CardGroup>