CSS filter: Blur, Brillo, Contraste y más
Domina la propiedad CSS filter — blur, brightness, contrast, grayscale, hue-rotate y drop-shadow.
La propiedad CSS filter aplica efectos gráficos a los elementos. A diferencia de la edición de imágenes en Photoshop, los filtros CSS son en tiempo real y no destructivos.
Los filtros se aplican como una lista de funciones. El orden importa: cada filtro se aplica al resultado del anterior.
Qué es CSS filter
La propiedad CSS filter acepta una lista separada por espacios de funciones de filtro. Los filtros se aplican al elemento y a todo su contenido incluyendo hijos.
Herramienta gratuita Generador de Filtros CSS Crea efectos de filtro CSS con vista previa en vivoblur() y brightness()
blur(radio) aplica un desenfoque gaussiano. brightness(cantidad) ajusta el brillo: brightness(1) sin cambios, brightness(0) es negro.
contrast(), grayscale(), sepia()
contrast(cantidad) ajusta el contraste. grayscale(cantidad) elimina el color: grayscale(1) es completamente en escala de grises. sepia(cantidad) aplica un tono marrón cálido.
Herramienta gratuita Simulador de Daltonismo Previsualiza cómo se ven tus diseños para usuarios con deficiencias de visiónhue-rotate() y saturate()
hue-rotate(ángulo) rota el tono de todos los colores. saturate(cantidad) ajusta la intensidad del color: saturate(0) es escala de grises, saturate(2) es altamente saturado.
drop-shadow() vs box-shadow
drop-shadow() crea una sombra que sigue la forma del elemento, incluyendo áreas transparentes en imágenes. box-shadow solo sigue el rectángulo delimitador del elemento.
Combinar múltiples filtros
Los múltiples filtros se aplican de izquierda a derecha. filter: brightness(1.2) contrast(1.1) saturate(1.3) crea una imagen vibrante.
Herramienta gratuita Generador de Glassmorphism Crea efectos de vidrio esmerilado con backdrop-filter y blur