Tailwind CSS Opacity

Tailwind CSS provides opacity utility classes to control the transparency of an element. These utilities set the CSS opacity property and can be applied to text, images, backgrounds, and other HTML elements.

opacity-0: Makes the element completely transparent.
opacity-5: Sets the opacity to 5%.
opacity-10: Sets the opacity to 10%.
opacity-20: Sets the opacity to 20%.
opacity-25: Sets the opacity to 25%.
opacity-30: Sets the opacity to 30%.
opacity-40: Sets the opacity to 40%.
opacity-50: Sets the opacity to 50%.
opacity-60: Sets the opacity to 60%.
opacity-70: Sets the opacity to 70%.
opacity-75: Sets the opacity to 75%.
opacity-80: Sets the opacity to 80%.
opacity-90: Sets the opacity to 90%.
opacity-95: Sets the opacity to 95%.
opacity-100: Makes the element fully opaque.

Note: Tailwind CSS v4 supports numeric opacity values from 0 to 100, including values that are not listed above. You can also use arbitrary values, such as opacity-[0.67], to set custom opacity.

Syntax

<element class="opacity-{amount}">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Opacity</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-6">
    <h1 class="text-3xl font-bold text-green-600 mb-2">
        Tailwind CSS Opacity
    </h1>
    <p class="mb-4">Examples of different opacity values:</p>
    <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 rounded-lg bg-green-500 opacity-100 flex items-center justify-center text-white text-sm">
            opacity-100
        </div>
        <div class="w-24 h-24 rounded-lg bg-green-500 opacity-75 flex items-center justify-center text-white text-sm">
            opacity-75
        </div>
        <div class="w-24 h-24 rounded-lg bg-green-500 opacity-50 flex items-center justify-center text-white text-sm">
            opacity-50
        </div>
        <div class="w-24 h-24 rounded-lg bg-green-500 opacity-25 flex items-center justify-center text-white text-sm">
            opacity-25
        </div>
        <div class="w-24 h-24 rounded-lg bg-green-500 opacity-0 flex items-center justify-center text-white text-sm">
            opacity-0
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The example displays five green boxes with different opacity levels. The opacity-100 box is fully visible, while the opacity-0 box is completely transparent. The other boxes become progressively more transparent.

Syntax

Explore