# Filter (filtros combinables) > Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/filter.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Efectos visuales Ajusta desenfoque, luz, contraste y color mediante ocho familias independientes que pueden aplicarse solas o combinarse. v2.0 8 ## Ocho familias Blur, brightness, contrast, grayscale, hue rotate, invert, saturate y sepia. + ## Composición real Las variables `--qy-filter-*` conservan cada efecto sin sobrescribir los demás. 0 ## Reset directo `.filter-none` elimina toda la composición de filtros del elemento. i ## El filtro modifica la superficie completa Se aplica al elemento ya renderizado: fondo, bordes, texto e hijos se procesan como una sola imagen. No cambia el layout ni las dimensiones. Código + resultado ## Compara cada tipo de filtro Cambia de pestaña para aplicar otra familia sobre la misma superficie y distinguir claramente su efecto. HTML Resultado aplicado Blur · 8px Misma superficie de referencia FILTER QuicklyCSS .blur-8 aplica un desenfoque de 8px a toda la superficie. ```html
Superficie con filtro
``` .brightness-150 aumenta la luminosidad al 150% del valor original. ```html
Superficie con filtro
``` .contrast-150 intensifica la diferencia entre las zonas claras y oscuras. ```html
Superficie con filtro
``` .grayscale-100 elimina completamente el color. ```html
Superficie con filtro
``` .hue-rotate-90 desplaza todos los matices 90 grados en la rueda cromática. ```html
Superficie con filtro
``` .invert-100 invierte completamente luces y colores. ```html
Superficie con filtro
``` .saturate-200 duplica la intensidad del color. ```html
Superficie con filtro
``` .sepia-100 aplica por completo el tono sepia. ```html
Superficie con filtro
``` Las variables permiten combinar matiz, saturación y brillo sin que una clase anule las demás. ```html
Superficie con filtro
``` Escalas completas ## Todos los valores disponibles Selecciona una familia para comparar visualmente cada clase incluida en `filter.css`. ¿Necesitas suavizar? Usa `.blur-*` ¿Ajustar luz? Usa `.brightness-*` o `.contrast-*` ¿Modificar color? Usa grayscale, hue, saturate o sepia ¿Invertir por completo? Usa `.invert-100` Blur ### `.blur-*` blur() Desenfoca toda la superficie. Los valores representan píxeles. Q `.blur-0` 0px Q `.blur-1` 1px Q `.blur-2` 2px Q `.blur-4` 4px Q `.blur-8` 8px Q `.blur-12` 12px Q `.blur-16` 16px Q `.blur-24` 24px Brightness ### `.brightness-*` brightness() Reduce o aumenta la luminosidad respecto del aspecto original. Q `.brightness-0` 0% Q `.brightness-50` 50% Q `.brightness-75` 75% Q `.brightness-90` 90% Q `.brightness-100` 100% Q `.brightness-110` 110% Q `.brightness-125` 125% Q `.brightness-150` 150% Q `.brightness-200` 200% Contrast ### `.contrast-*` contrast() Acerca o separa las zonas claras y oscuras de la superficie. Q `.contrast-0` 0% Q `.contrast-50` 50% Q `.contrast-75` 75% Q `.contrast-90` 90% Q `.contrast-100` 100% Q `.contrast-110` 110% Q `.contrast-125` 125% Q `.contrast-150` 150% Q `.contrast-200` 200% Grayscale ### `.grayscale-*` grayscale() Retira progresivamente la información de color. Q `.grayscale-0` 0% Q `.grayscale-50` 50% Q `.grayscale-100` 100% Hue rotate ### `.hue-rotate-*` hue-rotate() Gira todos los matices sobre la rueda cromática. Q `.hue-rotate-0` 0° Q `.hue-rotate-30` 30° Q `.hue-rotate-60` 60° Q `.hue-rotate-90` 90° Q `.hue-rotate-180` 180° Q `.hue-rotate-270` 270° Invert ### `.invert-*` invert() Intercambia los valores claros y oscuros, junto con sus colores opuestos. Q `.invert-0` 0% Q `.invert-100` 100% Saturate ### `.saturate-*` saturate() Reduce o intensifica la fuerza de los colores. Q `.saturate-0` 0% Q `.saturate-50` 50% Q `.saturate-100` 100% Q `.saturate-150` 150% Q `.saturate-200` 200% Sepia ### `.sepia-*` sepia() Transforma los colores hacia una tonalidad cálida y envejecida. Q `.sepia-0` 0% Q `.sepia-50` 50% Q `.sepia-100` 100% Q RESET ### `.filter-none` Elimina la propiedad `filter` completa, incluso cuando el elemento también contiene clases de las ocho familias. Composición ## Combina efectos sin perder los anteriores Cada clase modifica únicamente su variable; la regla común reconstruye la propiedad `filter` completa. 01 Gira el matiz `.hue-rotate-90` + 02 Intensifica el color `.saturate-200` + 03 Aumenta la luz `.brightness-110` HTML resultante ```html
Superficie combinada
``` El orden de estas clases en el atributo no elimina ninguna variable. RESULTADO APLICADO Q `3 filtros activos` Referencia ## Clases disponibles La tabla coincide con todas las utilidades incluidas actualmente en `filter.css`. | Familia | Valores | Unidad | Estado original | | --- | --- | --- | --- | | .blur-{valor} | 0, 1, 2, 4, 8, 12, 16, 24 | px | .blur-0 | | .brightness-{valor} | 0, 50, 75, 90, 100, 110, 125, 150, 200 | % | .brightness-100 | | .contrast-{valor} | 0, 50, 75, 90, 100, 110, 125, 150, 200 | % | .contrast-100 | | .grayscale-{valor} | 0, 50, 100 | % | .grayscale-0 | | .hue-rotate-{valor} | 0, 30, 60, 90, 180, 270 | ° | .hue-rotate-0 | | .invert-{valor} | 0, 100 | % | .invert-0 | | .saturate-{valor} | 0, 50, 100, 150, 200 | % | .saturate-100 | | .sepia-{valor} | 0, 50, 100 | % | .sepia-0 | | .filter-none | none | — | Elimina todos los filtros. | Recomendaciones ## Buenas prácticas para filtros 01 ### Conserva legibilidad Comprueba el contraste del texto después de aplicar brillo, contraste o inversión. 02 ### Modera el desenfoque Valores altos de blur pueden ocultar información y aumentar el área de renderizado. 03 ### Combina con intención Usa pocas familias simultáneas para que el resultado continúe siendo predecible. 04 ### Restablece con none Utiliza `.filter-none` cuando necesites eliminar toda la composición.