Open In App

Tailwind CSS Filter

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The filter class is used to set the visual effect of an element. This class is mostly used in image content. In CSS, we do that by using the CSS filter property. Tailwind CSS newly added feature filter in 2.1 version.

Filter Classes: 

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

Syntax:

<element class="filter">..</element>

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:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads