Creating an Semi-Transparent Background with Non-Transparent Text

A fun little css property that adds some dimension to a design is opacity. Opacity allows for the background to range from transparent to opaque depending upon the value. Rending certain areas semi-transparent allows for a cool layered look that creates some pow.

Some might be discouraged when you first noticed that using the opacity property creates any text within a div to also be semi-transparent. Fear thee not, there’s a solution to that!

Regular Old Opacity Property

Add the opacity property within the css for any div. Giving the value of 0 renders the div transparent. The value of 1 makes it non-transparent. Any number between 0-1 creates a semi-transparent effect. Here an example of what happens to text within a div that has an opacity of 0.5. As you can see the text isn’t exactly pure white. That’s because the text also has the opacity of 0.5.


Now you might think, well what if you try setting the h1 opacity to 1 but alas that will not change a thing. So here is another alternative.

Using RGBa in the Background Color

Converting your hex color to an rgb color might be the way to go for this. Most modern browsers will ¬†accept an rgba property value for the background. RGBa allows for the use of colors and include alpha transparency support. It works the same way as opacity. 0 will render the background completely transparent, 1 will create an opaque background, and any number in between will be a semi-transparent color. Here’s how to declare it! Remove the opacity property and add this.


What a difference:

And it doesn’t stop there!

What if I want to create a background shape with a semi-transparent background?

Semi-Transparent Borders

The same principal can be extending into border colors or any other property that takes a color value. This can create a lot of interesting applications. My favorite? Shapes!


You might be thinking, “Well thats swell but what about background images. You know what would be even cooler…semi-transparent images with non-transparent text.” And I totally agree.

Semi-Transparent Background Images with Non-Transparent Text

By using the opacity property and the :after selector we can accomplish this. And even better we can use the rgba background value to create a color filter over said background image. Cool right!? Here’s how we do it.



And here it is:

After that its just a combination of these techniques to get you where you want to go.