Tailwind CSS - Effects

Previous
Quiz
Next

Tailwind CSS Effects include the Box Shadow, Shadow Color, Opacity, Background Blend and Mix Blend mode. These are imporatnt concept of tailwind effets, to add an attractive effetc these concepts are necessary to learn.

Tailwind CSS Effetcs Reference

Below mentioned topics can be used to add effects in tailwind.

Topic Description Example
Tailwind CSS- Box Shadow This is used to control box shadow of an element.
Tailwind CSS- Box Shadow Color This is used to control box shadow color of an element.
Tailwind CSS - Opacity This is used to control the tranparecy of any element.
Tailwind CSS - Mix Blend Mode This is used to control how an element should blend with the background.
Tailwind CSS - Background Blend Mode This is used to control how an element's background image should blend with its background color.

Example of Tailwind CSS Effetcs

Below example will illustrate the Tailwind CSS, we will use see impact of each mentioned topic in the given code.

Example

<!DOCTYPE html>
</html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3"> Tailwind CSS Effects</h1>
    <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-2xl 
    </div> 
    <br>
    <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center shadow-green-950">
            shadow-green-950 
    </div> 
    <br>
    <button class="bg-green-500 opacity-50 
                       w-24 h-12 rounded-lg m-2">
            opacity-50
    </button>
    <br>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800 
                    w-36 h-36 rounded-full">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    w-36 h-36 rounded-full">
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next