ZenovayTools

Generador de Filtros CSS

Genera efectos de filtro CSS con vista previa en vivo. Ajusta desenfoque, brillo, contraste, escala de grises, rotación de matiz, invertir, saturación, sepia y sombra proyectada.

Presets

Filters

Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue Rotate0deg
Invert0%
Opacity100%
Saturate100%
Sepia0%

Preview

Original

Original

Filtered

Filtered
CSS Code
filter: none;

Cómo usar Generador de Filtros CSS

  1. 1Ajusta los controles deslizantes de filtro (desenfoque, brillo, contraste, etc.).
  2. 2Ve el efecto aplicado a una imagen de muestra en tiempo real.
  3. 3Combina múltiples filtros para efectos complejos.
  4. 4Copia la propiedad de filtro CSS generada.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, modo sin cookies disponible
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Qué es la propiedad de filtro CSS?▾
La propiedad de filtro CSS aplica efectos visuales como desenfoque, brillo, contraste y cambios de color a elementos. Funciona en cualquier elemento: imágenes, divs, texto, videos, SVGs. Los filtros se aplican en el orden listado y pueden combinarse. Compatible en todos los navegadores modernos desde 2015.
¿Qué filtros CSS están disponibles?▾
Filtros estándar: blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), sepia(%), drop-shadow(x y blur color). Además, url() puede hacer referencia a filtros SVG para efectos personalizados.
¿Cuál es la diferencia entre filter y backdrop-filter?▾
filter aplica efectos al elemento mismo y su contenido. backdrop-filter aplica efectos al área detrás del elemento (usado para glasomorfismo). Por ejemplo, filter: blur(5px) desenfoca el elemento; backdrop-filter: blur(5px) desenfoca lo que sea visible a través de un elemento semitransparente.
¿Afectan los filtros CSS al rendimiento?▾
Los filtros activan aceleración de GPU, que es eficiente para elementos estáticos pero puede ser costoso cuando se anima. blur() es el filtro más intensivo en rendimiento. Mejores prácticas: evita radios de desenfoque grandes en elementos grandes, usa will-change: filter para animaciones, evita filtrar elementos con muchos descendientes.
¿Cómo creo un filtro similar a Instagram?▾
Combina múltiples filtros CSS para replicar efectos de fotos. Ejemplo "Nashville": brightness(1.1) contrast(1.2) saturate(1.35) sepia(0.25). Ejemplo "Clarendon": brightness(1.25) contrast(1.2) saturate(1.35). Apila 2-4 filtros y ajusta los valores para crear looks únicos.