La propiedad filter de CSS aplica efectos visuales a un elemento — desenfoque, brillo, contraste y ajustes de color que funcionan en imágenes, fondos e incluso video. A diferencia de los editores de imagen, los filtros corren en el navegador, así que se mantienen nítidos a cualquier resolución y pueden animarse suavemente con transiciones.
Arrastra los deslizadores para apilar múltiples funciones de filtro en una cadena. La escena de muestra se actualiza en tiempo real y el código generado combina todo en una sola declaración filter lista para tu hoja de estilos.
Frequently Asked Questions
Q: ¿Qué funciones de filtro CSS existen?
¿Qué funciones de filtro CSS existen? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() y drop-shadow(). Puedes encadenar cualquier cantidad en una propiedad filter.
Q: ¿El filtro CSS está acelerado por GPU?
¿El filtro CSS está acelerado por GPU? Sí. La mayoría de funciones de filtro corren en la GPU y animan a 60fps. blur() y drop-shadow() son las más pesadas; úsalas con moderación en elementos grandes.
Q: ¿El filtro afecta al layout?
¿El filtro afecta al layout? No. Los filtros son puramente visuales — el elemento mantiene su tamaño y posición originales en el flujo del documento. Usa transform para cambios de tamaño.
Q: ¿Puedo animar filtros?
¿Puedo animar filtros? Sí. Anima la propiedad filter con transition o keyframes. Animar entre cadenas de filtros distintas de la misma longitud interpola suavemente.
Q: ¿Cómo hago una imagen en escala de grises que se colorea al pasar el cursor?
¿Cómo hago una imagen en escala de grises que se colorea al pasar el cursor? Usa dos estados: img { filter: grayscale(100%); transition: filter .4s; } e img:hover { filter: grayscale(0); }. Un patrón clásico de portafolio.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.