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

# Contrast

> Use the bundled contrast utilities to tighten or soften tonal separation in imagery.

export const FilterContrastDemo = () => {
  const levels = [{
    cls: "contrast-75",
    val: "0.75"
  }, {
    cls: "contrast-90",
    val: "0.9"
  }, {
    cls: "contrast-100",
    val: "1"
  }, {
    cls: "contrast-110",
    val: "1.1"
  }, {
    cls: "contrast-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: "contrast(" + l.val + ")"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Contrast utilities are bundled and work best on images, badges, and visual surfaces that need sharper or softer tonal separation.

| Class           | Filter (CSS)              | Usage                                       |
| --------------- | ------------------------- | ------------------------------------------- |
| `.contrast-75`  | `filter: contrast(0.75);` | Softer separation                           |
| `.contrast-90`  | `filter: contrast(0.9);`  | Slightly muted contrast                     |
| `.contrast-100` | `filter: contrast(1);`    | Neutral / no change (matches preview scale) |
| `.contrast-110` | `filter: contrast(1.1);`  | Slightly punchier imagery                   |
| `.contrast-125` | `filter: contrast(1.25);` | Stronger tonal separation                   |

## Example

<FilterContrastDemo />

### Markup

```html theme={null}
<div class="elementor-element contrast-110">
  <img alt="Higher contrast media" src="card-art.jpg"/>
</div>
```

## Best Practices

* Use small contrast adjustments first before reaching for stronger values.
* Test both light and dark contexts because contrast changes feel different in each.
* Avoid over-processing UI imagery that already has strong tonal separation.
* Combine with brightness intentionally when refining hero or card media.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Brightness" icon="brightness" href="/filters/brightness">
    Balance contrast with brightness changes
  </Card>

  <Card title="Hue Rotate" icon="palette" href="/filters/hue-rotate">
    Change color families after tonal corrections
  </Card>
</CardGroup>