Bird
Raised Fist0
Tailwindmarkup~5 mins

Opacity modifiers on colors in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Opacity modifiers let you make colors see-through. This helps create layers and softer looks on your website.

When you want a button background to be lighter but keep the same color
To make text or icons less strong so they don't distract too much
When layering images or colors and you want some parts to show through
To create hover effects that change transparency smoothly
Syntax
Tailwind
bg-color/opacity
text-color/opacity
border-color/opacity

Opacity is added after a slash / following the color name.

Opacity values go from 0 (fully transparent) to 100 (fully solid).

Examples
This sets a blue background with 50% opacity, making it half see-through.
Tailwind
bg-blue-500/50
This makes red text with 75% opacity, so it looks a bit lighter.
Tailwind
text-red-600/75
This applies a green border with 30% opacity, making it very faint.
Tailwind
border-green-400/30
Sample Program

This page shows three examples: a blue box with half opacity background, red text with 75% opacity, and a button with a faint green border at 30% opacity. The button border becomes fully green on hover.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Opacity Modifiers Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-6 bg-gray-100 p-6">
  <div class="w-64 h-24 bg-blue-500/50 flex items-center justify-center rounded">
    <p class="text-white font-semibold">Blue 50% opacity</p>
  </div>
  <p class="text-red-600/75 font-bold text-lg">Red text 75% opacity</p>
  <button class="border-4 border-green-400/30 px-6 py-2 rounded hover:border-green-400 transition">
    Green border 30% opacity
  </button>
</body>
</html>
OutputSuccess
Important Notes

Opacity modifiers only affect the color they are attached to, not the whole element.

You can combine opacity modifiers with hover or focus states for interactive effects.

Using opacity modifiers keeps your colors consistent but flexible in transparency.

Summary

Opacity modifiers add transparency to Tailwind colors using a slash and number.

Values range from 0 (invisible) to 100 (fully visible).

They help create layered, softer, or interactive color effects easily.

Practice

(1/5)
1. What does the Tailwind class bg-blue-500/50 do to the background color?
easy
A. Sets the background color to fully opaque blue
B. Sets the background color to blue with 5% opacity
C. Sets the background color to blue with 50% opacity
D. Sets the background color to blue with 100% opacity

Solution

  1. Step 1: Understand the opacity modifier syntax

    The slash and number after the color (like /50) means opacity percentage in Tailwind.

  2. Step 2: Interpret the number 50

    50 means 50% opacity, so the color is half transparent.

  3. Final Answer:

    Sets the background color to blue with 50% opacity -> Option C

  4. Quick Check:

    bg-blue-500/50 means 50% opacity [OK]
Hint: Slash number after color means opacity percent [OK]
Common Mistakes:
  • Confusing 50 with 5 or 100
  • Ignoring the slash and treating as normal color
  • Thinking opacity is from 0 to 1 instead of 0 to 100
2. Which of these is the correct Tailwind class to apply 25% opacity on a red background?
easy
A. bg-red-500/25
B. bg-red-500-25
C. bg-red-25/500
D. bg-red-25

Solution

  1. Step 1: Recall Tailwind opacity syntax

    Opacity is added after color with a slash, e.g., /25 for 25% opacity.

  2. Step 2: Check each option

    Only bg-red-500/25 uses correct slash syntax and valid color code.

  3. Final Answer:

    bg-red-500/25 -> Option A

  4. Quick Check:

    Slash before opacity number is correct [OK]
Hint: Use slash before opacity number, not dash [OK]
Common Mistakes:
  • Using dash instead of slash for opacity
  • Putting opacity before color number
  • Missing slash entirely
3. What will be the visible opacity of the text if the class text-green-700/75 is applied?
medium
A. 75% opacity (mostly visible)
B. 25% opacity (mostly transparent)
C. 100% opacity (fully visible)
D. 50% opacity (half visible)

Solution

  1. Step 1: Understand the opacity value in the class

    The /75 means 75% opacity, so the color is mostly visible but slightly transparent.

  2. Step 2: Match opacity to options

    75% opacity means mostly visible, not fully or half transparent.

  3. Final Answer:

    75% opacity (mostly visible) -> Option A

  4. Quick Check:

    text-green-700/75 means 75% opacity [OK]
Hint: Opacity number after slash equals percent visible [OK]
Common Mistakes:
  • Mixing 75 with 25 or 50
  • Thinking opacity means darkness instead of transparency
  • Ignoring the slash and reading as normal color
4. You wrote bg-yellow-400/110 to set background opacity. What is wrong with this?
medium
A. Opacity must be a decimal like 1.10
B. Slash should be a dash
C. Yellow color does not support opacity
D. Opacity value cannot be more than 100

Solution

  1. Step 1: Check valid opacity range

    Opacity in Tailwind must be between 0 and 100 inclusive.

  2. Step 2: Analyze the given value 110

    110 is above 100, so it's invalid and will cause no effect or error.

  3. Final Answer:

    Opacity value cannot be more than 100 -> Option D

  4. Quick Check:

    Opacity max is 100, not above [OK]
Hint: Opacity max is 100, never above [OK]
Common Mistakes:
  • Using values above 100
  • Confusing slash with dash
  • Thinking opacity can be decimal over 1
5. You want a button with a blue background that is fully visible normally but becomes 40% opaque on hover. Which Tailwind classes achieve this?
hard
A. bg-blue-600/100 hover:bg-blue-600
B. bg-blue-600 hover:bg-blue-600/40
C. bg-blue-600 hover:bg-blue-600-40
D. bg-blue-600/40 hover:bg-blue-600

Solution

  1. Step 1: Set normal background fully visible

    Use bg-blue-600 for fully opaque blue background (default opacity 100%).

  2. Step 2: Set hover background with 40% opacity

    Use hover:bg-blue-600/40 to apply 40% opacity on hover.

  3. Step 3: Check other options for correctness

    bg-blue-600/100 hover:bg-blue-600 uses unnecessary /100 and full opacity on hover (no change), bg-blue-600/40 hover:bg-blue-600 reverses opacity states, bg-blue-600 hover:bg-blue-600-40 uses wrong syntax.

  4. Final Answer:

    bg-blue-600 hover:bg-blue-600/40 -> Option B

  5. Quick Check:

    Normal full opacity, hover with /40 opacity [OK]
Hint: Normal color no slash, hover with slash opacity [OK]
Common Mistakes:
  • Using dash instead of slash for opacity
  • Setting opacity on normal state instead of hover
  • Using /100 opacity unnecessarily