Opacity

Fade elements with opacity utilities.

Syntaxclass="opacity-50"

Set transparency with opacity-0 through opacity-100 in steps. Combine with hover: for fade effects.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer dims a modal backdrop to 50% opacity using bg-black/50, making the underlying page partially visible.
A disabled button is visually greyed out using opacity-50 and cursor-not-allowed to signal it is unavailable.
A tooltip fades from opacity-0 to opacity-100 on hover, with a CSS transition providing the smooth reveal.

More examples

Disabled button with opacity

disabled:opacity-50 halves the button's visual weight when the disabled attribute is present, signaling unavailability.

<button
  disabled
  class="bg-blue-600 text-white px-5 py-2 rounded
         disabled:opacity-50 disabled:cursor-not-allowed"
>
  Processing...
</button>

Scrim overlay with color opacity

bg-black/40 uses the color-opacity shorthand to apply a 40% opaque black layer over the image without a separate opacity utility.

<div class="relative">
  <img src="photo.jpg" alt="" class="w-full rounded">
  <div class="absolute inset-0 bg-black/40 rounded flex items-center justify-center">
    <p class="text-white font-bold text-lg">Caption</p>
  </div>
</div>

Fade-in on hover

opacity-0 hides the overlay by default; group-hover:opacity-100 reveals it when the parent is hovered; transition-opacity animates the fade.

<div class="group relative">
  <img src="product.jpg" alt="" class="rounded">
  <div class="absolute inset-0 bg-indigo-600/80 rounded
              opacity-0 group-hover:opacity-100 transition-opacity duration-300"
  >
    <p class="text-white text-center mt-16 font-semibold">View Details</p>
  </div>
</div>

Discussion

Be the first to comment on this lesson.