Utilidades · Efectos visuales
Filter (filtros combinables)
Ajusta desenfoque, luz, contraste y color mediante ocho familias independientes que pueden aplicarse solas o combinarse.
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.
Reset directo
.filter-none elimina toda la composición de filtros del elemento.
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.
<div class="blur-8">
Superficie con filtro
</div>
<div class="brightness-150">
Superficie con filtro
</div>
<div class="contrast-150">
Superficie con filtro
</div>
<div class="grayscale-100">
Superficie con filtro
</div>
<div class="hue-rotate-90">
Superficie con filtro
</div>
<div class="invert-100">
Superficie con filtro
</div>
<div class="saturate-200">
Superficie con filtro
</div>
<div class="sepia-100">
Superficie con filtro
</div>
<div class="hue-rotate-90 saturate-200 brightness-110">
Superficie con filtro
</div>
Escalas completas
Todos los valores disponibles
Selecciona una familia para comparar visualmente cada clase incluida en filter.css.
.blur-*.brightness-* o .contrast-*.invert-100.blur-*
Desenfoca toda la superficie. Los valores representan píxeles.
.blur-00px.blur-11px.blur-22px.blur-44px.blur-88px.blur-1212px.blur-1616px.blur-2424px.brightness-*
Reduce o aumenta la luminosidad respecto del aspecto original.
.brightness-00%.brightness-5050%.brightness-7575%.brightness-9090%.brightness-100100%.brightness-110110%.brightness-125125%.brightness-150150%.brightness-200200%.contrast-*
Acerca o separa las zonas claras y oscuras de la superficie.
.contrast-00%.contrast-5050%.contrast-7575%.contrast-9090%.contrast-100100%.contrast-110110%.contrast-125125%.contrast-150150%.contrast-200200%.grayscale-*
Retira progresivamente la información de color.
.grayscale-00%.grayscale-5050%.grayscale-100100%.hue-rotate-*
Gira todos los matices sobre la rueda cromática.
.hue-rotate-00°.hue-rotate-3030°.hue-rotate-6060°.hue-rotate-9090°.hue-rotate-180180°.hue-rotate-270270°.invert-*
Intercambia los valores claros y oscuros, junto con sus colores opuestos.
.invert-00%.invert-100100%.saturate-*
Reduce o intensifica la fuerza de los colores.
.saturate-00%.saturate-5050%.saturate-100100%.saturate-150150%.saturate-200200%.sepia-*
Transforma los colores hacia una tonalidad cálida y envejecida.
.sepia-00%.sepia-5050%.sepia-100100%.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.
.hue-rotate-90.saturate-200.brightness-110<div class="hue-rotate-90 saturate-200 brightness-110">
Superficie combinada
</div>El orden de estas clases en el atributo no elimina ninguna variable.
3 filtros activosReferencia
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
Conserva legibilidad
Comprueba el contraste del texto después de aplicar brillo, contraste o inversión.
Modera el desenfoque
Valores altos de blur pueden ocultar información y aumentar el área de renderizado.
Combina con intención
Usa pocas familias simultáneas para que el resultado continúe siendo predecible.
Restablece con none
Utiliza .filter-none cuando necesites eliminar toda la composición.