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

# Brightness

> Use the bundled brightness utilities to dim or lift media without replacing the source asset.

export const FilterBrightnessDemo = () => {
  const levels = [{
    cls: "brightness-75",
    val: "0.75"
  }, {
    cls: "brightness-90",
    val: "0.9"
  }, {
    cls: "brightness-100",
    val: "1"
  }, {
    cls: "brightness-110",
    val: "1.1"
  }, {
    cls: "brightness-125",
    val: "1.25"
  }];
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="33%" stop-color="#a855f7"/><stop offset="66%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="400" height="300" fill="url(#a)"/><circle cx="80" cy="220" r="50" fill="rgba(255,255,255,0.15)"/><circle cx="300" cy="80" r="70" fill="rgba(255,255,255,0.1)"/></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-5 gap-4">
          {levels.map(l => <div key={l.cls} className="flex flex-col items-center gap-2">
              <span className="tw-label">{l.cls}</span>
              <div className="rounded-lg overflow-hidden" style={{
    width: "100%",
    aspectRatio: "4/3"
  }}>
                <img src={imgSrc} alt="" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    filter: "brightness(" + l.val + ")"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Brightness utilities are bundled and work well for hero media, image overlays, and quick tonal corrections when the source asset should stay unchanged.

| Class             | Filter (CSS)                | Usage                                       |
| ----------------- | --------------------------- | ------------------------------------------- |
| `.brightness-75`  | `filter: brightness(0.75);` | Noticeably dimmed media                     |
| `.brightness-90`  | `filter: brightness(0.9);`  | Slight dim for backgrounds behind text      |
| `.brightness-100` | `filter: brightness(1);`    | Neutral / no change (matches preview scale) |
| `.brightness-110` | `filter: brightness(1.1);`  | Light lift                                  |
| `.brightness-125` | `filter: brightness(1.25);` | Stronger lift; use sparingly                |

## Example

<FilterBrightnessDemo />

### Markup

```html theme={null}
<img alt="Dimmed image" class="brightness-90 rounded-xl" src="banner.jpg"/>
```

## Best Practices

* Reduce brightness for background media behind text.
* Increase brightness sparingly to avoid washed-out visuals.
* Pair brightness with contrast carefully so images stay readable.
* Prefer opacity alone when you only need a simple dimming effect.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Contrast" icon="circle-half-stroke" href="/filters/contrast">
    Tune contrast alongside brightness
  </Card>

  <Card title="Saturate" icon="droplet" href="/filters/saturate">
    Adjust color intensity after brightness changes
  </Card>
</CardGroup>