filter: grayscale()

Ejemplos

Ejemplo básico

Usa utilidades como grayscale y grayscale-75 para controlar la cantidad de efecto grayscale aplicado a un elemento:

grayscale-0

grayscale-25

grayscale-50

grayscale

<img class="grayscale-0 ..." src="/img/mountains.jpg" />
<img class="grayscale-25 ..." src="/img/mountains.jpg" />
<img class="grayscale-50 ..." src="/img/mountains.jpg" />
<img class="grayscale ..." src="/img/mountains.jpg" />

Usando un valor personalizado

Usa la sintaxis grayscale-[<value>] para establecer el grayscale basado en un valor completamente personalizado:

<img class="grayscale-[0.5] ..." src="/img/mountains.jpg" />

Para variables CSS, también puedes usar la sintaxis grayscale-(<custom-property>) :

<img class="grayscale-(--my-grayscale) ..." src="/img/mountains.jpg" />

Esto es solo un atajo para grayscale-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad filter: grayscale() con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<img class="grayscale md:grayscale-0 ..." src="/img/mountains.jpg" />

Aprende más sobre el uso de variantes en la documentación de variantes.