filter
En esta página
| Clase | Propiedades CSS |
|---|---|
filter-none |
filter: none; |
filter-(<custom-property>) |
filter: var(<custom-property>); |
filter-[<value>] |
filter: <value>; |
Examples#
Basic example#
Use utilities like blur-xs and grayscale to apply filters to an element:
{
blur-xs
grayscale
combined
<!-- [!code classes:blur-xs,grayscale] -->
<img class="blur-xs" src="/img/mountains.jpg" />
<img class="grayscale" src="/img/mountains.jpg" />
<img class="blur-xs grayscale" src="/img/mountains.jpg" />
You can combine the following filter utilities: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, and sepia.
Removing filters#
Use the filter-none utility to remove all of the filters applied to an element:
<!-- [!code classes:md:filter-none] -->
<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />