CSS filter playground

Aplica y previsualiza filtros CSS como blur, brightness, contrast y más sobre una imagen de prueba

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>