En este artículo
La propiedad CSS filter explicada
La propiedad CSS filter aplica efectos gráficos como desenfoque, brillo, contraste y cambios de color a cualquier elemento HTML. Funciona en imágenes, fondos, texto e incluso secciones completas de una página. Los filtros son procesados por la GPU del navegador, haciéndolos eficientes para efectos visuales en tiempo real.
CSS proporciona nueve funciones de filtro integradas: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia. Estas pueden encadenarse en una sola declaración filter para crear efectos visuales complejos. El orden de los filtros importa — cada función procesa la salida de la anterior.
Cómo funciona cada función de filtro
Cada función de filtro toma un solo valor y transforma la salida visual del elemento. Entender qué hace cada función te ayuda a combinarlas eficazmente.
- blur(px) — aplica un efecto de desenfoque gaussiano, haciendo que el elemento aparezca desenfocado. Valores más altos crean un desenfoque más fuerte. Útil para superposiciones de fondo y efectos de vidrio esmerilado
- brightness(%) y contrast(%) — brightness escala la luminosidad general (100% sin cambios, 200% doble), mientras que contrast ajusta la diferencia entre áreas claras y oscuras
- grayscale(%), sepia(%) y hue-rotate(deg) — grayscale elimina la saturación de color, sepia añade un tono marrón cálido, y hue-rotate desplaza todos los colores alrededor de la rueda cromática
Pruébalo gratis — sin registro
Generar filtros CSS →Creando efectos estilo Instagram
Apilando múltiples funciones de filtro CSS, puedes recrear efectos de filtros fotográficos populares completamente en código. Estos efectos se aplican en tiempo real a cualquier elemento de imagen.
- Look vintage — combina sepia(60%) con contrast(110%) y brightness(90%) para crear un efecto de fotografía cálida y desvanecida que recuerda a las antiguas cámaras de película
- Blanco y negro — usa grayscale(100%) con contrast(120%) para un efecto monocromático de alto contraste. Añade brightness(110%) para un blanco y negro más brillante
- Ambiente dramático — apila contrast(150%) con saturate(130%) y brightness(80%) para una atmósfera vívida y oscurecida donde los colores resaltan contra sombras profundas
Preguntas frecuentes
¿Se pueden usar filtros SVG con la propiedad CSS filter?
Sí. La función url() dentro de CSS filter permite referenciar definiciones de filtros SVG personalizados para efectos más allá de las funciones integradas. Esto permite efectos avanzados como mapas de desplazamiento y matrices de color.
¿Los filtros CSS afectan el rendimiento?
Los filtros CSS son acelerados por GPU en navegadores modernos, haciéndolos eficientes para la mayoría de usos. Filtros simples en imágenes tienen impacto mínimo. Sin embargo, aplicar desenfoque en áreas grandes o animar múltiples filtros puede causar caídas de frames en dispositivos menos potentes.
¿Se pueden animar los filtros en hover?
Sí. Los filtros CSS funcionan perfectamente con transiciones y animaciones. Un patrón común es aplicar un filtro grayscale o blur por defecto y hacer transición al aspecto original en hover, creando efectos suaves acelerados por GPU.