🎚️Generador de filtros CSS

Funciones y unidades de filter

La propiedad filter de CSS aplica efectos visuales a imágenes o elementos. Se escribe combinando funciones como blur y sepia, separadas por espacios.

• px (píxeles)：La función blur especifica el radio de desenfoque en px. Con 4px, los colores se mezclan en un rango de 4 píxeles de radio.
• % (porcentaje)：Las funciones brightness y sepia especifican la intensidad del efecto en %. En brightness, 100% es el brillo original y 120% es 20% más brillante.
• deg (grados)：La función hue-rotate especifica el ángulo de rotación de color en la rueda cromática en deg. Con 180deg, el color cambia al lado opuesto.

Por qué el orden cambia los resultados

Las funciones en filter se aplican de izquierda a derecha, cada efecto se aplica al resultado anterior. Cambiar el orden puede alterar el aspecto final. Por ejemplo, aplicar sepia después de escala de grises deja tonos pardos, pero aplicar sepia primero y luego escala de grises elimina los tonos pardos. Esta herramienta mantiene el orden fijo, pero puedes cambiar el orden editando el código CSS generado.

Diferencia con backdrop-filter

filter y backdrop-filter pueden usar las mismas funciones, pero se aplican a objetivos diferentes.

• filter：filter aplica efectos visuales al elemento especificado (imágenes, texto, etc.).
• backdrop-filter：backdrop-filter aplica efectos a lo que se ve detrás del elemento, comúnmente usado para crear efectos de vidrio esmerilado.