Backdrop Sepia In Tailwind CSS
In this article, we will explore more about Tailwind Backdrop Sepia class with examples. Backdrop Sepia is a new class that belongs to the Backdrop Filter module.
This module includes several filters that can be applied to an element’s backdrop, such as blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, and sepia. However, not all browsers support this module yet.
Fortunately, Tailwind allows you to use Backdrop Sepia in any browser, as it includes a fallback system that provides a similar effect using other CSS properties.
Tailwind Backdrop Sepia
Tailwind Backdrop Sepia class applies a sepia filter to an element’s backdrop.
This filter can be adjusted to any degree of sepia intensity, from 0% (no sepia) to 100% (full sepia).
This feature was first included in version 2.1 of Tailwind CSS.
Syntax:
<element class="filter backdrop-sepia |backdrop-sepia-0"></element>
Tailwind Backdrop Sepia Values
- backdrop-sepia-0 : This class represents the original image, with no sepia effect. In regular CSS, it is equivalent to backdrop-filter: sepia(0);
- backdrop-sepia : This class represents the sepia image, with a 100% sepia effect. In regular CSS, it is equivalent to backdrop-filter: sepia(100%);
you can use either backdrop-sepia or backdrop-sepia-0, depending on the desired effect.
The pipe symbol (|) indicates that you can only use one of the classes.
Here’s an example of using Backdrop Sepia classes:
