Why CSS Background Transparency Fades Your Text

If making a box’s background see-through also fades its text, you’re probably fading the whole box. The CSS setting opacity affects everything inside it. To keep the words solid, remove that setting and give only the background color some transparency.

Picture a card with a heading and a few words. Fading the card with opacity is like fading one complete picture of it. The background and the writing fade together.

For a see-through background with solid writing, change only the background. The words can stay exactly as they are. Here’s how to make that change in a small example.

See What Is Fading

Start with a box containing a paragraph. The div groups the content, and class="notice" gives that box a name for CSS to target. Put this in your example’s HTML:

<div class="notice">
    <p>Our coding club meets on Friday.</p>
</div>

The paragraph is inside the box. Next, add this CSS. The dot in .notice selects the matching class. The padding adds space around the words so the background is easy to see.

.notice {
    background-color: black;
    color: white;
    padding: 20px;
    opacity: 0.5;
}

On a white page, the black box looks gray and the white words look faded. The value 0.5 makes the whole card half opaque, or partly see-through. It doesn’t select just the black paint behind the words.

This is a useful follow-up to the CSS Presence lesson: once you try its opacity example, check what happens to the content inside your own box.

Make Only the Background Color Transparent

Keep the HTML. Replace the CSS above with this version. It gives the background color its own transparency and removes the opacity line:

.notice {
    background-color: rgb(0 0 0 / 50%);
    color: white;
    padding: 20px;
}

The three zeros describe black: zero red, green, and blue. The percentage after the slash controls that color’s opacity. Here, 50% makes the background partly see-through; 100% would make it solid, and 0% would make it fully transparent.

This extra part of a color value is called its alpha channel. You don’t need a new HTML box to use it. You’re changing the paint used by background-color.

The background now blends with whatever is behind it, while the text stays solid. On a white page, the background still looks gray, but the white words are brighter than in the first version. MDN’s semi-transparent box guide demonstrates this same distinction.

Why Setting the Text to Opacity 1 Does Not Help

It’s tempting to keep the first version and give the paragraph opacity: 1. But the paragraph still belongs to the faded box. Making the words fully solid on their own cannot undo fading applied to the complete card.

Technically, the paragraph doesn’t inherit the card’s opacity value. The effect comes from fading the card including its contents, as the MDN opacity reference explains.

If the replacement still looks faded, check the CSS for any surrounding box that contains the notice. An opacity setting there can fade the notice too. Remove or change the setting on the box that is actually causing the fading.

Try One Change at a Time

Use the replacement example to separate background transparency from text appearance:

1. Change 50% to 80%, save, and refresh or update your preview. The background should become more solid while the words stay solid.
2. Change it to 20% and update again. More of the page behind the card should show through.
3. Restore 50%, then change the page background color. Notice how the card’s visible background changes as it blends with the new color behind it.

Check the words against the actual background you plan to use. Solid text can still be hard to read if the background is too similar. If transparency makes reading difficult, use a more solid background or choose a clearer text-and-background combination.

This example changes a background color. It doesn’t fade a background image. Keep that distinction in mind when choosing which part of your design you want to change.

What to Learn Next

Continue with these lessons to practice choosing the part of a box you want to change.

• CSS Presence lets you compare transparency with other ways to show or hide an element.
• CSS Background explains the colors and images painted behind a box’s content.
• CSS Color introduces color values and how text and background colors work together.