Tailwind CSS - Opacity

Previous
Quiz
Next

Tailwind CSS Opacity is a utility class that provides an effective way of controlling the transparency of any element.

Tailwind CSS Opacity Classes

The following is the list of Tailwind CSS Opacity classes that provide an effective way of handling transparency or opacity of any element.

Class CSS Properties
opacity-0 opacity: 0;
opacity-5 opacity: 0.05;
opacity-10 opacity: 0.1;
opacity-15 opacity: 0.15;
opacity-20 opacity: 0.2;
opacity-25 opacity: 0.25;
opacity-30 opacity: 0.3;
opacity-35 opacity: 0.35;
opacity-40 opacity: 0.4;
opacity-45 opacity: 0.45;
opacity-50 opacity: 0.5;
opacity-55 opacity: 0.55;
opacity-60 opacity: 0.6;
opacity-65 opacity: 0.65;
opacity-70 opacity: 0.7;
opacity-75 opacity: 0.75;
opacity-80 opacity: 0.8;
opacity-85 opacity: 0.85;
opacity-90 opacity: 0.9;
opacity-95 opacity: 0.95;
opacity-100 opacity: 1;

Functionality of Tailwind CSS Box Shadow Color Classes

  • opacity-* This class is used to define the transparency of elements. The * symbol can be replaced with any valid number from 0 to 100 with a gap of 5.

Tailwind CSS Opacity Class Examples

The following examples will illustrate the Tailwind CSS opacity class utility.

Setting Different Level Opacity

Here in this example, we will set different levels of opacity on each element using different opacity classes.

Example

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Opacity Class
    </h2>
    <p>Opacity Effect are Decreasing on Each button</p>
    <div class="flex">
        <button class="bg-green-500 opacity-100 
                       w-24 h-12 rounded-lg m-2">
            opacity-100
        </button>
        <button class="bg-green-500 opacity-75 
                       w-24 h-12 rounded-lg m-2">
            opacity-75
        </button>
        <button class="bg-green-500 opacity-50 
                       w-24 h-12 rounded-lg m-2">
            opacity-50
        </button>
        <button class="bg-green-500 opacity-25 
                       w-24 h-12 rounded-lg m-2">
            opacity-25
        </button>

    </div>
</body>

</html>

Remove Opacity on Hover

In the following example, we will set opacity 100 when hovering over the element so the element can be clearly visible.

Example

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Opacity Class
    </h2>
    <button class="bg-green-500 opacity-50 hover:opacity-100
                   w-24 h-12 rounded-lg m-2">
        Hover 
    </button>
</body>

</html>
Print Page
Previous
Next