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

# Filters

> Bundled filter utilities for blur, brightness, contrast, saturation, and color shifts.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Filters.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=c0c1280118aa52bf0a8e953905c60c3b" className="dark:hidden block" alt="Filters overview cover" width="4054" height="2489" data-path="images-for-overview/Filters.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Filters%20-%20Dark.png" className="hidden dark:block" alt="Filters overview cover (dark)" />
</div>

## Overview

Filters utilities adjust blur, brightness, contrast, saturation, hue, and color effects.

## Filter Guides

<CardGroup cols={2}>
  <Card title="Blur" icon="eye" href="/filters/blur">
    Soften media and decorative layers with the bundled blur scale.
  </Card>

  <Card title="Brightness" icon="brightness" href="/filters/brightness">
    Dim or lift imagery without replacing the source asset.
  </Card>

  <Card title="Contrast" icon="circle-half-stroke" href="/filters/contrast">
    Tighten or soften tonal separation with the shipped contrast helpers.
  </Card>

  <Card title="Saturate" icon="droplet" href="/filters/saturate">
    Increase or reduce color intensity with the bundled saturation scale.
  </Card>

  <Card title="Hue Rotate" icon="palette" href="/filters/hue-rotate">
    Shift imagery into a new color family with the bundled hue helpers.
  </Card>

  <Card title="Color Effects" icon="wand-magic-sparkles" href="/filters/color-effects">
    Use grayscale, invert, sepia, and filter reset helpers.
  </Card>
</CardGroup>

## Shipped Filter Families

* `filter-none`
* `blur-sm`, `blur`, `blur-md`, `blur-lg`, `blur-xl`
* `brightness-75`, `brightness-90`, `brightness-100`, `brightness-110`, `brightness-125`
* `contrast-75`, `contrast-90`, `contrast-100`, `contrast-110`, `contrast-125`
* `saturate-0`, `saturate-50`, `saturate-100`, `saturate-150`, `saturate-200`
* `hue-rotate-15`, `hue-rotate-30`, `hue-rotate-60`, `hue-rotate-90`, `hue-rotate-180`
* `grayscale`, `grayscale-50`, `invert`, `invert-50`, `sepia`, `sepia-50`

## Related Guides

<CardGroup cols={2}>
  <Card title="Effects" icon="sparkle" href="/concepts/effects">
    Opacity and box-shadow guidance that pairs well with filters
  </Card>

  <Card title="Box Shadow" icon="moon-over-sun" href="/effects/box-shadow">
    Use outer and inset box-shadow utilities for rectangular surfaces
  </Card>
</CardGroup>