Open In App

Tailwind CSS Effects Complete Reference

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Effects control the effects on elements. that provide classes to apply effects on elements like box-shadow, opacity/transparency.

Tailwind CSS Class

Description

Box ShadowIt controls the box-shadow of an element.
OpacityIt sets the opacity of any element.

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

Example:

HTML 
<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/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 Box Shadow Class</b>
    <div class="grid grid-flow-col text-center p-2">
        <div class="shadow-sm w-24 h-24 bg-green-200
                    rounded-lg">shadow-sm
        </div>
        <div class="shadow w-24 h-24 bg-green-200
                    rounded-lg">shadow
        </div>
        <div class="shadow-md w-24 h-24 bg-green-200
                    rounded-lg">shadow-md
        </div>
        <div class="shadow-lg w-24 h-24 bg-green-200
                    rounded-lg">shadow-lg
        </div>
        <div class="shadow-xl w-24 h-24 bg-green-200
                    rounded-lg">shadow-xl
        </div>
        <div class="shadow-2xl w-24 h-24 bg-green-200
                    rounded-lg">shadow-2xl
        </div>
    </div>
</body>

</html>

Output:

Tailwind CSS Effects
Tailwind CSS Effects

K

kartik
Improve
Article Tags :

Explore

Lightbox