Tailwind CSS Contrast

The contrast utilities in Tailwind CSS are used to adjust the contrast of an element, such as an image. These utilities apply the CSS contrast() filter function to make an image appear less or more contrasted.

Contrast Classes

contrast-0: Sets the contrast to 0, making the element appear gray.
contrast-50: Sets the contrast to 0.5.
contrast-75: Sets the contrast to 0.75.
contrast-100: Sets the contrast to 1, preserving the original contrast.
contrast-125: Sets the contrast to 1.25.
contrast-150: Sets the contrast to 1.5.
contrast-200: Sets the contrast to 2, increasing the contrast.
contrast-[<value>]: Applies a custom contrast value.

Syntax

<element class="contrast-{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">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Contrast Class</title>
</head>
<!--Driver Code Ends-->

<body class="p-6 text-center">
    <h1 class="text-3xl font-bold text-green-600 mb-2">
        Tailwind CSS Contrast Class
    </h1>
    <p class="mb-6">Compare different contrast values.</p>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div>
            <img class="w-full rounded-lg contrast-0"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with zero contrast">
            <p class="mt-2">contrast-0</p>
        </div>

        <div>
            <img class="w-full rounded-lg contrast-50"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with reduced contrast">
            <p class="mt-2">contrast-50</p>
        </div>

        <div>
            <img class="w-full rounded-lg contrast-100"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with normal contrast">
            <p class="mt-2">contrast-100</p>
        </div>

        <div>
            <img class="w-full rounded-lg contrast-200"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with increased contrast">
            <p class="mt-2">contrast-200</p>
        </div>
    </div>
</body>

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

Output: The images display different contrast levels. contrast-0 removes the contrast, contrast-50 reduces it, contrast-100 preserves the original contrast, and contrast-200 increases it.

Contrast Classes

Syntax

Explore