Introduction

If you apply CSS opacity to an element, the browser fades the whole element, including its text and children. To make only the background transparent while keeping text fully opaque, the usual fix is to use a semi-transparent background color such as rgba() or to place the background on a separate layer.

Why opacity Fades Everything

This is the root of the problem:

.banner {
  opacity: 0.5;
}

That rule affects the entire rendered box, not just the background fill. So the background, text, icons, borders, and child elements all become half transparent.

If your goal is “transparent background, normal text,” opacity on the container is the wrong tool.

The Simple Fix: Use rgba()

Instead of changing the element’s overall opacity, make the background color itself transparent.

<div class="banner">Readable text on a faded background</div>

1.banner {
2  background-color: rgba(0, 0, 0, 0.5);
3  color: white;
4  padding: 1rem;
5}

Now only the background color has alpha transparency. The text stays fully opaque because color is still a normal solid value.

This is the most common and most practical answer.

Modern Alternatives: rgb() with Alpha or hsl()

Modern CSS also allows slash-alpha syntax:

1.banner {
2  background-color: rgb(0 0 0 / 50%);
3  color: white;
4}

Or with HSL:

1.banner {
2  background-color: hsl(210 50% 20% / 0.4);
3  color: white;
4}

These are functionally similar to rgba(). Use whichever style fits your codebase.

Using a Pseudo-Element for More Complex Backgrounds

If the background is an image, gradient, or overlay effect, a pseudo-element is often better because it creates a separate layer behind the text.

<div class="card">
  <p>Text stays crisp while the overlay fades.</p>
</div>

1.card {
2  position: relative;
3  color: white;
4  padding: 1rem;
5}
6
7.card::before {
8  content: "";
9  position: absolute;
10  inset: 0;
11  background: rgba(0, 0, 0, 0.45);
12  z-index: 0;
13}
14
15.card > * {
16  position: relative;
17  z-index: 1;
18}

Here the pseudo-element holds the translucent background, while the text sits on a separate layer above it.

When This Pattern Is Useful

This approach is especially helpful when you want:

• text over a photo
• a translucent overlay on hover
• a tinted card background
• readable text on a busy hero section

Keeping text and background on separate layers gives you more control than fading the whole block.

Borders, Shadows, and Other Effects

Remember that opacity affects borders and shadows too. If you want only the fill color to fade, use background alpha instead of global opacity.

For example:

1.panel {
2  background-color: rgba(255, 255, 255, 0.75);
3  border: 1px solid #ccc;
4  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
5}

This keeps the border and shadow visually stable while only the panel fill is translucent.

Common Pitfalls

The most common mistake is putting opacity on the parent and expecting the text to be unaffected. That is not how CSS compositing works.

Another issue is using a pseudo-element overlay without setting positioning correctly. If the parent is not position: relative, the overlay may not line up with the intended box.

A third pitfall is forgetting stacking order. If the overlay sits above the text, the text may become hard to click or read. Use z-index carefully.

Summary

• 'opacity fades the whole element, including text and children.'
• To fade only the background, use a color with alpha such as rgba() or modern slash-alpha syntax.
• For complex overlays, put the translucent background on a pseudo-element.
• Separate layers give better control for text over images or gradients.
• If the text should stay fully opaque, do not put global opacity on the text container.