CSS Filter Playground

Apply and preview CSS filters like blur, brightness, contrast, and more on a test image

BACKDROP FILTER MODE

CSS Visual Filter & Optical Controls

Blur: 16px

Brightness: 110%

Contrast: 100%

Grayscale: 0%

Hue Rotate: 0°

Invert: 0%

Opacity: 100%

Saturate: 180%

Sepia: 0%

Optical Stage Preview

Frosted Glass

Dynamic backdrop optical refraction effect.

Pure CSS Filter Rule

/* CSS Filter Effect */
.filtered-element {
  -webkit-backdrop-filter: blur(16px) brightness(110%) saturate(180%);
  backdrop-filter: blur(16px) brightness(110%) saturate(180%);
}

Tailwind CSS Utility Structure

// Tailwind CSS Class Equivalents
<div className="backdrop-blur-16 brightness-110 contrast-100 ...">
  {/* Content */}
</div>