CSS Filter Generator

Apply blur, brightness, contrast, hue-rotate, and more CSS filter effects with live preview.

Live Preview

Filter Preview

none

Filter Controls

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0°

Invert0%

Opacity100%

Saturate100%

Sepia0%

Generated CSS

css

.element {
  filter: none;
}

/* Backdrop filter variant (glass effects) */
.backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

Filter reference

• blur — Gaussian blur. Larger = more blurred

• brightness — 0=black, 100=original, 200=double bright

• contrast — 0=gray, 100=original, 200=high contrast

• grayscale — 0=color, 100=full grayscale

• hue-rotate — rotates hue wheel (0-360°)

• invert — 0=normal, 100=fully inverted colors

• saturate — 0=grayscale, 100=original, 200=vivid

• sepia — 0=normal, 100=full sepia tone