Skip to main content
Filters overview cover

​
Overview

Filters utilities adjust blur, brightness, contrast, saturation, hue, color effects, and alpha-aware shadows.

​
Filter Guides

Blur

Soften media and decorative layers with the bundled blur scale.

Brightness

Dim or lift imagery without replacing the source asset.

Contrast

Tighten or soften tonal separation with the shipped contrast helpers.

Saturate

Increase or reduce color intensity with the bundled saturation scale.

Hue Rotate

Shift imagery into a new color family with the bundled hue helpers.

Color Effects

Use grayscale, invert, sepia, and filter reset helpers.

Drop Shadow

Add alpha-aware shadows for transparent artwork and SVGs.

​
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
  • drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg

Effects

Opacity and box-shadow guidance that pairs well with filters

Box Shadow

Use importer-supported box-shadow utilities for rectangular surfaces

Supported Properties

Check which CSS properties the importer currently supports

Custom CSS

Extend the shipped filter surface with project-specific utilities