Tailwind CSS Opacity Scale

Complete Tailwind v4 opacity reference.
Element opacity: opacity-50 Color opacity: bg-blue-500/50

Element Opacity Classes

opacity-0

opacity-5

opacity-10

10%

opacity-15

15%

opacity-20

20%

opacity-25

25%

opacity-30

30%

opacity-35

35%

opacity-40

40%

opacity-45

45%

opacity-50

50%

opacity-55

55%

opacity-60

60%

opacity-65

65%

opacity-70

70%

opacity-75

75%

opacity-80

80%

opacity-85

85%

opacity-90

90%

opacity-95

95%

opacity-100

100%

Color Opacity Modifier Syntax

Background Colors

bg-red-500/5050% opacity

bg-blue-500/7575% opacity

bg-green-500/[0.35]35% (arbitrary)

bg-black/10Subtle overlay

Text & Border Colors

text-white/8080% opacity

text-black/6060% opacity

border-gray-300/50Subtle border

divide-white/20Divider lines

Usage Examples

Faded Overlay

<div class="relative">
  <img src="hero.jpg" />
  <div class="absolute inset-0 bg-black/50">
    <!-- Dark overlay -->
  </div>
</div>

Subtle Background

<div class="bg-blue-500/10 p-4">
  <!-- Light tinted background -->
</div>

Hover Opacity

<button class="opacity-80 hover:opacity-100">
  Fade in on hover
</button>

Muted Text

<p class="text-black/70">
  Secondary text content
</p>

Interactive Opacity States

Hover States

hover:opacity-100hover:bg-white/20hover:text-black/90

Focus States

focus:opacity-100focus:ring-blue-500/50focus-visible:opacity-100

Disabled States

disabled:opacity-50disabled:opacity-40aria-disabled:opacity-50

About Tailwind Opacity

Tailwind provides two ways to control transparency: opacity-* classes affect the entire element, while the / modifier controls individual color opacity.

The color opacity modifier (e.g., bg-blue-500/50) only affects that specific color, not child elements - making it more flexible than element-wide opacity.

For arbitrary values, use bracket notation: opacity-[0.67] or bg-red-500/[0.33]

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect opacity, colors, spacing, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →