¿Importa el orden de los filtros?

Sí. Los filtros CSS se aplican de izquierda a derecha y muchos no son conmutativos. `filter: blur(8px) grayscale(100%)` desenfoca primero la imagen en color y luego desatura; `grayscale(100%) blur(8px)` desatura primero y luego desenfoca el resultado en grises. La diferencia visual es sutil en la mayoría de pares pero obvia en blur + contraste o blur + drop-shadow.

¿Por qué filter es más lento que trucos de background-color?

Los filtros obligan al navegador a asignar un canvas fuera de pantalla, renderizar el elemento ahí, ejecutar el shader del filtro y luego componer. Los filtros ligeros (brillo, contraste, saturación) son baratos; los pesados (blur, drop-shadow con radio grande) pueden tirar una animación de 60 fps a 20. Evita filtros en elementos que se animen o hagan scroll constantemente - aplícalos una vez y deja que se compongan.

¿Diferencia entre filter y backdrop-filter?

`filter` se aplica al elemento - la imagen del ` ` o el contenido pintado de un ` `. `backdrop-filter` se aplica a lo que se renderiza *detrás* del elemento, visible a través de su fondo. Usa `filter` para efectos de imagen (estilo Instagram); usa `backdrop-filter` para overlays de vidrio esmerilado sobre una imagen. El generador glassmorphism cubre el segundo caso.

¿Puedo animar los valores de filter?

Sí - `filter` es animable en transiciones y keyframes CSS. Cada función interpola por separado, que es lo que quieres para crossfades de nítido a borroso o de color a escala de grises. La pega es el rendimiento: animar blur de 0 a 24 píxeles estresa la GPU en la mayoría de portátiles. Prueba en el dispositivo más lento que soportes.

¿Por qué mis filtros no funcionan en el iframe?

Restricciones cross-origin. Los filtros CSS funcionan en contenido del mismo origen (tu página, tus SVGs e imágenes), pero el navegador se niega a filtrar iframes o imágenes cross-origin servidos sin `Access-Control-Allow-Origin: *`. Sirve el asset desde tu propio dominio o usa un CDN compatible con CORS.

Generador de filtro CSS

Patio de juego CSS filter con sliders para blur, brillo, contraste, saturación, sepia, escala de grises, invert, hue-rotate y opacidad.

Preajustes

Desenfoque0px

Brillo100%

Contraste100%

Saturación100%

Sepia0%

Escala de grises0%

Inversión0%

Rotación tono0deg

Opacidad100%

CSS

filter: none;

Vista previa

Arrastra los sliders para cualquier combinación de funciones CSS filter y la vista previa se actualiza en vivo. Cada slider está conectado a una función (`blur(Npx)`, `brightness(N%)`, etc.); la salida las combina en orden de origen, lo cual importa - un blur antes de grayscale se ve distinto de grayscale antes de blur. Los preajustes recrean el look de filtros estilo Instagram como punto de partida.

Cómo usarla

Elige un preajuste (o salta)
Los preajustes dan un punto de partida en un clic. Sáltalos y ajusta de cero si prefieres.
Desliza cada función
Blur, brillo, contraste, saturación, sepia, escala de grises, invertir, hue-rotate, opacidad - un slider por función.
Reordena si importa
Silencia o reordena las funciones cuando el resultado visual depende del orden (blur + escala de grises).
Copia el CSS
La declaración `filter:` combinada está lista para pegar en tu hoja de estilos.

¿Qué es?

La propiedad CSS `filter` aplica un efecto gráfico (desenfoque, cambio de color, contraste, etc.) a un elemento antes de componerlo. Es el reemplazo web moderno de las capas de ajuste de Photoshop y las cadenas de SVG `<filter>` - acelerado por GPU cuando el navegador puede, declarativo y apilable. Cada función toma un único parámetro (una longitud para blur, un porcentaje para la mayoría de funciones de color, un ángulo para hue-rotate) y produce un efecto idéntico al de su primitiva SVG-filter equivalente.

Cuándo usarla

Recrear filtros estilo Instagram en CSS, atenuar o desaturar estados hover sin cambiar de imagen, construir galerías con un blur sutil en miniaturas inactivas, atenuar imágenes de fondo detrás de un texto hero, aplicar brillo a imágenes que se ven deslavadas en modo oscuro, y debugging rápido de imágenes (`filter: invert(1)` para detectar assets mal hechos).

Errores comunes

Apilar demasiados filtros sobre una imagen grande - el rendimiento se hunde. Animar `filter: blur()` para efectos de «respiración» en imágenes hero - hasta dispositivos modestos sufren. Poner `filter` en el mismo elemento que `backdrop-filter` (funciona pero la interacción confunde). Olvidar que filter se aplica a todos los hijos también - un padre con `filter: grayscale(1)` desatura todo, incluido vídeo, aunque el hijo sea de color.

Preguntas frecuentes

¿Importa el orden de los filtros?: Sí. Los filtros CSS se aplican de izquierda a derecha y muchos no son conmutativos. `filter: blur(8px) grayscale(100%)` desenfoca primero la imagen en color y luego desatura; `grayscale(100%) blur(8px)` desatura primero y luego desenfoca el resultado en grises. La diferencia visual es sutil en la mayoría de pares pero obvia en blur + contraste o blur + drop-shadow.
¿Por qué filter es más lento que trucos de background-color?: Los filtros obligan al navegador a asignar un canvas fuera de pantalla, renderizar el elemento ahí, ejecutar el shader del filtro y luego componer. Los filtros ligeros (brillo, contraste, saturación) son baratos; los pesados (blur, drop-shadow con radio grande) pueden tirar una animación de 60 fps a 20. Evita filtros en elementos que se animen o hagan scroll constantemente - aplícalos una vez y deja que se compongan.
¿Diferencia entre filter y backdrop-filter?: `filter` se aplica al elemento - la imagen del `<img>` o el contenido pintado de un `<div>`. `backdrop-filter` se aplica a lo que se renderiza *detrás* del elemento, visible a través de su fondo. Usa `filter` para efectos de imagen (estilo Instagram); usa `backdrop-filter` para overlays de vidrio esmerilado sobre una imagen. El generador glassmorphism cubre el segundo caso.
¿Puedo animar los valores de filter?: Sí - `filter` es animable en transiciones y keyframes CSS. Cada función interpola por separado, que es lo que quieres para crossfades de nítido a borroso o de color a escala de grises. La pega es el rendimiento: animar blur de 0 a 24 píxeles estresa la GPU en la mayoría de portátiles. Prueba en el dispositivo más lento que soportes.
¿Por qué mis filtros no funcionan en el iframe?: Restricciones cross-origin. Los filtros CSS funcionan en contenido del mismo origen (tu página, tus SVGs e imágenes), pero el navegador se niega a filtrar iframes o imágenes cross-origin servidos sin `Access-Control-Allow-Origin: *`. Sirve el asset desde tu propio dominio o usa un CDN compatible con CORS.