filter: sepia()

Ejemplos

Ejemplo básico

Usa utilidades como sepia y sepia-50 para controlar el efecto sepia aplicado a un elemento:

sepia-0

sepia-50

sepia

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

Usando un valor personalizado

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

<img class="sepia-[.25] ..." src="/img/mountains.jpg" />

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

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

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

Responsive design

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

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

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