Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Filter

  • Last Updated : 09 Jun, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :