Tailwind CSS Filter

In Tailwind CSS, the Filter utilities allow you to control the visibility eFFECTS of elements. The key classes include:

• filter: This class is used to enable filters.
• filter-none: This class is used to remove filters.

Tailwind css Blur

In Tailwind CSS, the blur utility applies a blur effect to an element, simulating a soft focus. This can be useful for creating a frosted glass effect, highlighting foreground content, or adding depth to your design.

Hear is the class list of BLUR Filter

• blur-0
• blur-sm
• blur-md
• blur-lg
• blur-xl

Tailwind css brightness

In Tailwind CSS, the brightness utility lets you control the brightness of an element. It's often used to modify images, backgrounds, or other visual elements to create focus, highlight, or achieve a desired visual effect.

Hear is the class list of Brightness Filter

• brightness-0
• brightness-50
• brightness-75
• brightness-90
• brightness-95
• brightness-100
• brightness-105
• brightness-110
• brightness-125
• brightness-150
• brightness-200

Tailwind css invert

In Tailwind CSS, the invert utility is used to invert the colors of an element. This effect can be particularly useful for creating unique visual styles, dark mode effects, or emphasis on specific elements.

Tailwind css contrast

In Tailwind CSS, the contrast utility allows you to control the contrast of an element. It's particularly useful for enhancing or reducing the difference between light and dark areas of images, backgrounds, and other visual elements.

Hear is the class list of contrast Filter

• contrast-0
• contrast-50
• contrast-75
• contrast-100
• contrast-125
• contrast-150
• contrast-200

Tailwind css grayscale

In Tailwind CSS, the grayscale utility is used to convert an element’s colors to shades of gray. This can be applied to images, backgrounds, or other elements to achieve visual effects such as desaturation or a grayscale filter.

Hear is the class list of contrast Filter

• grayscale
• grayscale-0

Tailwind css Drop Shadow

In Tailwind CSS, the drop-shadow utility is used to apply decorative shadows to an element. Unlike box-shadow, which includes shadows that follow the shape of an element, drop-shadow is primarily applied to images, SVGs, and other elements, creating a softer, external shadow effect.

Hear is the class list of Drop Shadow Filter

• drop-shadow-sm
• drop-shadow-md
• drop-shadow-lg
• drop-shadow-xl
• drop-shadow-2xl
• drop-shadow-none

Tailwind css Hue Rotate

In Tailwind CSS, the hue-rotate utility is used to adjust the hue of an element's colors. This utility is particularly useful for creating dynamic visual effects, tweaking the color scheme of images, or adding creative effects to designs.

Hear is the class list of Hue Rotate Filter

• -hue-rotate-180
• -hue-rotate-90
• -hue-rotate-60
• -hue-rotate-30
• -hue-rotate-15
• hue-rotate-0
• -hue-rotate-15
• -hue-rotate-30
• -hue-rotate-60
• -hue-rotate-90
• -hue-rotate-180

Tailwind css Saturate

In Tailwind CSS, the hue-rotate utility is used to adjust the hue of an element's colors. This utility is particularly useful for creating dynamic visual effects, tweaking the color scheme of images, or adding creative effects to designs.

Hear is the class list of Saturate Filter

• Saturate-0
• Saturate-50
• Saturate-100
• Saturate-150
• Saturate-200

Tailwind css Sepia

In Tailwind CSS, the sepia utility is used to apply a sepia tone to elements, typically images or backgrounds. The sepia filter gives a warm, brownish tint to the colors of an element, which is often used for vintage or retro effects.

Hear is the class list of Sepia Filter

• Sepia
• Sepia-0

Tailwind css Backdrop Filter

In Tailwind CSS, the backdrop-filter utility allows you to apply graphical effects such as blur, brightness, contrast, and other CSS filter functions to the area behind an element (we can use above all filter property with backdrop filter)

Hear is the class list of Backdrop Filter

• backdrop-filter
• backdrop-filter-none