How to Set Background Opacity in CSS

CSS is an integral part of the web because it lets you control the styles of the page.

One of the most interesting things you can do with CSS is create a transparent or semi-transparent colored background.

In this post, we'll learn the easiest ways to set a background color with opacity in CSS.

How to set a background color with the opacity property

One of the most straightforward ways to set a background color with opacity is to use the opacity property.

This property is used to set the opacity level for an element.

The opacity level is a number between 0 and 1, where 0 means fully transparent and 1 means fully opaque.

Let's create a div with a background color and set the opacity to 0.5:

HTML
<div class="semi-transparent">
    Hello world
</div>

CSS
.semi-transparent {
    background-color: #ff0000;
    opacity: 0.5;
}

The result will be a div with a red background color and 50% opacity:

Keep in mind that because the opacity property cascades down the entire element, the text inside the div will also be semi-transparent.

If you would like just the background to be semi-transparent, follow along to the next section.

How to set a background color with the rgba() function

The rgba() function is used to set the color and opacity of an element.

The last parameter of the function is the opacity level, which is a number between 0 and 1, where 0 means fully transparent and 1 means fully opaque.

Let's again create a div with a background color and set the opacity to 0.5:

HTML
<div class="semi-transparent">
    Hello world
</div>

CSS
.semi-transparent {
    background-color: rgba(255, 0, 0, 0.5);
}

As you can see, the result is the same as the previous example, except that the text inside the div is not semi-transparent.

How to set a background color using hex

You can also set a background color with opacity using hex.

The hex color code is a six-digit code that represents the amount of red, green, and blue in a color, however, it can also include an alpha channel, which is the opacity level.

Let's once again create a div with a background color and set the opacity to 0.5.

Keep in mind that we need to convert the opacity level to hex, which is a number between 00 and ff, where 00 means fully transparent and ff means fully opaque, so to get 50% opacity, we need to convert 0.5 to hex, which is 80.

HTML
<div class="semi-transparent">
    Hello world
</div>

CSS
.semi-transparent {
    background-color: #ff000080;
}

As you can see, the result is the same as the previous examples, except that the text inside the div is not semi-transparent:

Conclusion

In this post, we learned how to set a background color with opacity in CSS.

The options include using the opacity property, the rgba() function, and defining the color with alpha in hex.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share