Diseño y Recursos

CSS Filter Generador

Generar CSS filter values con a visual effect preview.

Más herramientas de Diseño y Recursos

Entrada

CSS Filter Generador

css filterblurcontrastgenerator

Salida

Generated CSS filter

Filter

blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg)

.filter-preview {
  width: min(100%, 340px);
  border-radius: 24px;
  overflow: hidden;
  filter: blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg);
  box-shadow: 0 18px 36px rgba(15,23,42,0.14);
}

.filter-preview .hero {
  min-height: 160px;
  background: radial-gradient(circle at 20% 20%, #38bdf8, transparent 30%), radial-gradient(circle at 80% 30%, #8b5cf6, transparent 35%), linear-gradient(145deg, #111827, #0f172a);
}

.filter-preview .copy {
  padding: 16px 18px;
  background: white;
  color: #0f172a;
}

Filter preview

Live canvas

Herramientas relacionadas

Box Shadow Generador

Generar CSS box-shadow values con custom offsets y blur.

Flexbox Generador

Generar flex contIAner CSS con a live layout preview.

Border Radius Generador

Generar border-radius CSS desde corner values.

CSS Grid Generador

Generar CSS Grid layouts con columns, gap, y row sizing.

CSS Button Generador

Generar styled CSS button code.

CSS Transparam Generador

Build CSS transparam strings desde common transparam values.