Opacity and Color Modifiers

CSS opacity controls the overall transparency of an element, from 0 (invisible) to 1 (fully opaque). The critical thing to understand is that opacity is inherited by children: setting opacity: 0.5 on a card also makes its text, images, and buttons 50% transparent. This is often not what you want — you usually only need the background to be transparent, not the content.

Tailwind maps opacity-* utilities to CSS opacity values. Available steps include opacity-0, opacity-5, opacity-10, opacity-25, opacity-50, opacity-75, opacity-90, opacity-95, and opacity-100. These are useful for disabled states, hover fades, and overlay elements where you intentionally want the whole element to be semi-transparent.

Tailwind v3 introduced the slash opacity modifier, which applies opacity directly to a color value without affecting children. Write bg-blue-600/50 to set the background to blue-600 at 50% opacity — only the background is transparent, text and children remain fully opaque. This is the preferred way to create translucent colored surfaces.

The slash modifier accepts any value from 0 to 100 in steps of 5: /0, /5, /10, /20, /25, /30, /40, /50, /60, /70, /75, /80, /90, /95, /100. You can also use arbitrary values like /[33] for exactly 33% opacity. The modifier works on any color utility: bg-*, text-*, border-*, ring-*, and shadow-*.

The slash modifier on text-* utilities creates semi-transparent text without a separate opacity class. text-gray-900/50 renders the near-black color at 50% opacity, creating a muted effect. This is commonly used for placeholder text, secondary labels, and disabled text that needs to appear faded rather than a different color.

Apply the slash modifier to border colors for translucent borders: border-gray-900/10 creates a very subtle border that works on both light and dark backgrounds. This technique is popular for dividers and card borders where a fully opaque border would be too harsh. Combine with dark: variants for automatic theme adaptation.

Combine bg-white/80 with backdrop-blur-md to create a frosted glass effect — a translucent element with a blurred view of what is behind it. This modern UI pattern is used in sticky navigation bars, floating panels, and notification drawers. The backdrop-blur-* utilities use the CSS backdrop-filter property.

Modal dialogs and drawers typically need a semi-transparent backdrop behind them. The bg-gray-900/50 class creates the standard dark overlay. Using the slash modifier instead of opacity-50 means the backdrop's own background is semi-transparent while still intercepting clicks and preventing interaction with the content behind it.

Use hover:opacity-* to fade elements on hover. Applying opacity-100 hover:opacity-75 slightly dims an element when hovered, giving tactile feedback without a color change. This is subtle and elegant for image overlays, card hover states, and gallery items where you want a visual response without an aggressive color shift.

The slash modifier also works on ring-* focus indicators. ring-indigo-500/50 creates a semi-transparent focus ring that is visible but not jarring. This is especially useful in dark mode where a fully opaque ring can look harsh. Combine with focus-visible: to show the ring only when needed for keyboard navigation.

When the predefined opacity steps (5, 10, 25, 50, 75, 100) do not meet your needs, use arbitrary values with bracket notation: bg-blue-600/[33] applies exactly 33% opacity. Arbitrary values give you pixel-perfect control for design specifications that require unusual transparency values, though sticking to the predefined steps usually produces a more consistent design.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: opacity-* utilities affect the entire element and its children, the slash modifier (bg-color/opacity) makes only the color property transparent while children remain opaque, and backdrop-blur-md with bg-white/80 creates a frosted glass effect. Next up we control background image sizing, position, and repeat patterns.