Cuando empecé a trabajar con los filtros en CSS, lo primero que me sorprendió fue lo parecido que era aplicar efectos “estilo Photoshop o GIMP” con una sola línea de código. A partir de ahí se volvió adictivo: empecé a probarlo con imágenes, textos, videos e incluso elementos <canvas>. En esta guía te voy a contar lo esencial (y lo que no es tan obvio), con ejemplos listos para usar.
¿Qué son los filtros en CSS y para qué sirven?
Los filtros en CSS son funciones que alteran la apariencia visual de un elemento: desenfoque, brillo, contraste, sepia, saturación, sombra paralela, etc. Aunque solemos aplicarlos a imágenes, técnicamente funcionan sobre cualquier elemento del DOM.
Cuando yo los empecé a usar, descubría efectos que ni siquiera había planeado: un blur sobre video, o un contraste aplicado a texto conseguían resultados inesperados (pero útiles).
Cómo funcionan y qué elementos pueden filtrarse
Puedes aplicarlos sobre:
- imágenes (<img>)
- fondos (background-image)
- textos
- videos
- contenedores completos
- <canvas> (muy útil cuando generas gráficos dinámicos)
Efectos tipo “Photoshop/GIMP” con una sola línea de CSS
Como todo en CSS, es algo sencillo, simplemente lo típico para aplicar los filtros, su sintaxis directa:
filter: sepia(100%);Muchos filtros aceptan 0–1 o 0%–100%.
Ejemplo: contrast(0.5) = contrast(50%).Orden de aplicación y combinación de funciones
Esto es clave. Si aplicas:
filter: grayscale(100%) brightness(40%);Lo primero que hace es convertir la imagen en blanco y negro y después ajusta el brillo.
Cuando estaba probando combinaciones para un artículo, recuerdo que intercambié dos funciones y el resultado cambió totalmente.
La propiedad filter: sintaxis, valores y reglas clave
La propiedad filter acepta una o varias funciones, aplicadas en el orden en el que las escribas.
Yo solía usar prefijos -webkit-filter y -moz-filter para mantener compatibilidad, especialmente en proyectos antiguos. Hoy en día casi no son necesarios, pero si trabajas con navegadores legacy, siguen funcionando:
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}Prefijos -webkit y -moz: cuándo usarlos hoy
- Relevantes solo para proyectos que deban soportar navegadores antiguos.
- No afectan Chrome/Firefox modernos.
- Yo los usé por costumbre durante años.
Todos los filtros CSS explicados con ejemplos
Los filtros en CSS pueden ser aplicados a cualquiera de los elementos del DOM tales como texto, imágenes, video e incluso el canvas.
Usaremos los prefijos (webkit y moz) de los filtros para mantener compatibilidad entre los navegadores; por último, esta es la imagen que usaremos a lo largo de este artículo sin ningún filtro aplicado:
Escala de grises: grayscale()
Convierte al elemento a escala de grises, el filtro está definido en grados, en rangos de 0% a 100%, que corresponden de un elemento a color a un elemento completamente en blanco/negro respectivamente.
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
Lo utilicé constantemente en mis primeras pruebas porque tenía una imagen base sin filtro para comparar resultados.
hue-rotate: rotación de matiz
Define la rotación del color medida en grados; es decir nos permite variar el tono del elemento sobre un ángulo de color. El filtro comprende valores entre 0 y 359, funciona como si de una rueda se tratase; es decir; si colocamos el valor "360deg" obtendremos el valor "0deg".
img {
-webkit-filter: hue-rotate(150deg);
-moz-filter: hue-rotate(150deg);
filter: hue-rotate(150deg);
}
Genial para efectos artísticos.
sepia(): tono sepia
Aplica un tono de sepia al elemento, de nuevo, se mide en grados en un rango de 0% (elemento con su color original) al 100%.
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
filter: sepia(100%);
}
Contraste
Ajusta el contraste de nuestro elemento, también se encuentra definida en grados y acepta valores negativos.
img {
-webkit-filter: contrast(250%);
-moz-filter: contrast(250%);
filter: contrast(250%);
}
Saturación
Ajusta la saturación de nuestro elemento, 0% retorna un elemento del DOM completamente en negro y 100% el elemento con su color original.
img {
-webkit-filter: saturate(40%);
-moz-filter: saturate(40%);
filter: saturate(40%);
}
Desenfoque (Blur): : desenfoque gaussiano
Aplica el desenfoque gaussiano en nuestra elemento medido en pixeles comenzando en 0.
img {
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
filter: blur(6px);
}
Perfecto para fondos tipo glassmorphism o para difuminar elementos detrás de modal.
invert(): inversión de colores
Invierte los colores del elemento; como la mayoría de los filtros; se miden en grados, de 0% a 100% en donde 0% corresponde al elemento con sus colores originales y 100% el elemento con sus colores completamente invertidos.
img {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
Brillo: brightness()
Aclara u oscurece el elemento; como la mayoría de los filtros; se miden en grados, de 0% a 100%.
img {
-webkit-filter: brightness(40%);
-moz-filter: brightness(40%);
filter: brightness(40%);
}
Lo uso mucho para resaltar imágenes oscuras sin editar el archivo original.
opacity(): opacidad
Para definir la opacidad:
filter: opacity(0.5);drop-shadow(): sombra paralela avanzada
filter: drop-shadow(8px 8px 10px red);url(): filtros SVG
filter: url(#my-filter);Poco usado pero potentísimo para efectos personalizados.
Cómo combinar varios filtros en CSS para crear efectos avanzados
podemos usar más de un filtro por elemento en la separando por espacio cada uno de ellos y crear efectos visuales muy interesantes.
img {
-webkit-filter: grayscale(69%) brightness(18%) contrast(110%);
-moz-filter: grayscale(69%) brightness(18%) contrast(110%);
filter: grayscale(69%) brightness(18%) contrast(110%);
}
Buenas prácticas
- No abuses de blur + drop-shadow juntos (puede ser costoso en rendimiento).
- Ajusta valores gradualmente: pasar de 0 a 100% suele generar saltos visuales bruscos.
- No asumas que el orden no importa: sí importa.
Ejemplos creativos
Efecto vintage:
filter: sepia(80%) brightness(90%) saturate(120%);Efecto neón para texto:
filter: brightness(140%) saturate(200%);La propiedad backdrop-filter: filtros solo para el fondo
Cuando descubrí backdrop-filter, pensé literalmente: ¡por fin puedo desenfocar el fondo sin afectar el texto!
backdrop-filter: blur(10px);Diferencias entre filter y backdrop-filter
- filter → afecta al elemento completo
- backdrop-filter → afecta solo lo que hay detrás
Casos de uso clásicos
- tarjetas tipo glassmorphism
- menús flotantes sobre imágenes
- overlays translúcidos
Compatibilidad
Funciona bien en navegadores modernos, pero requiere fallback para algunos entornos.
Compatibilidad con navegadores y notas de rendimiento
Los filtros están muy bien soportados hoy, excepto backdrop-filter en versiones antiguas de Firefox y Edge Legacy.
En proyectos reales, yo siempre probé filtros pesados en móviles porque un blur grande puede consumir recursos.
Ejemplos completos listos para copiar
Filtros aplicados a imágenes
img.vintage {
filter: sepia(70%) contrast(120%) brightness(90%);
}Filtros aplicados a texto
h2.glow {
filter: brightness(150%) saturate(200%);
}Animar filtros
img:hover {
transition: filter 0.5s;
filter: grayscale(0);
}Esto mismo lo usé cuando quería pasar de una imagen en escala de grises a color al pasar el mouse.
Ejemplos con filtros en CSS
Estos son solamente algunos de los ejemplos que tenemos en el blog con el uso de los filtros con CSS; por aquí te dejo los otros posts en los cuales, vemos otros experimentos con los filtros:
- El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
- El filtro invert (invertir) en CSS y alguno de sus posibles usos
Preguntas frecuentes sobre filtros CSS
- ¿Se pueden animar los filtros?
- Sí, con transition y @keyframes.
- ¿Afectan al rendimiento?
- Los valores altos de blur y drop-shadow pueden consumir GPU.
- ¿Puedo usar varios filtros a la vez?
- Sí, separados por espacios.
- ¿Cómo usar filtros en imágenes transparentes?
- drop-shadow() es tu amigo: respeta contornos reales.
Conclusión
Los filtros CSS son una herramienta creativa, potente y fácil de usar. Yo he trabajado con ellos en todo tipo de elementos —desde imágenes hasta videos y textos— y siguen siendo una de las funciones más subestimadas del lenguaje. Con una sola línea puedes transformar completamente el estilo visual de cualquier proyecto.