Skip to content
Related Articles

Related Articles

Tailwind CSS Filters Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Mar, 2022
View Discussion
Improve Article
Save Article

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Filters applies graphical effects like filters, blur, brightness, contrast, drop shadow, etc. to an element. These classes are mostly used on image content

Below example will give you a brief idea about the Filters of Tailwind CSS:

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
          rel="stylesheet">
</head>
  
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Filter Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter brightness-50"
        src=
            alt="image">
        <img class="rounded-lg filter invert"
            src=
            alt="image">
        <img class="rounded-lg filter blur-lg"
            src=
            alt="image">
        <img class="rounded-lg filter contrast-125"
            src=
            alt="image">
        <img class="rounded-lg filter grayscale"
            src=
            alt="image">
          
    </div>
</body>
  
</html>


Output:

Tailwind CSS Filters

Tailwind CSS Filters


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!