How to Set Background Opacity in CSS

1. Use the opacity Property to Create a Transparent Color in CSS
2. Use the rgba() Function to Create Transparent Color in CSS
3. Use Hex Values to Create a Transparent Color in CSS

In this article, we will introduce three methods to create transparent color in HTML using CSS. It will set the background opacity in CSS.

Use the opacity Property to Create a Transparent Color in CSS

The opacity is one of the properties used in CSS, especially with the colors. We can use values between 0 to 1 to show the opacity of color or an element. If the value is 1, it means the color is 100% opaque. It means the color is not transparent at all. If we decrease the value initially, the element will get more transparent. If the opacity value is 0.5, the color will get semi-transparent or 50% transparent. However, while using opacity, the child element also gets transparent.

For example, create an HTML document with a heading h1 and a class transparent. Set the background-color as #cc33ff and opacity value 0.4 after selecting the transparent class in CSS. If we want the heading and its background color to get more transparent, we can decrease opacity value.

The example below shows that the background color and the heading h1 get transparent as we keep the opacity value, i.e. 0.4.

Example Code:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

Use the rgba() Function to Create Transparent Color in CSS

The rgba() function defines colors using the red-green-blue-alpha model. The rbg in the rbga() function signifies color values for red, green, and blue, while a signifies the opacity of the color. Each parameter (red, blue, green) defines the intensity of color between 0-255. Whereas the value of a has to be between 0-1. For example rgba(255, 100, 100, 0.4). The lesser the value of a, the more transparent the color will be. The child element does not get transparent, unlike that of the opacity property. If the value of a is 0.5, the color will be semi-transparent or 50% transparent.

For example, create an HTML document with heading h1 and class transparent. Write the text Hello World between the heading tag. Use the rgba() function to give them background color to the class. Put the rgba value as rgba(255, 100, 100, 0.4). Decrease the value of a to make it more transparent and increase the value of a to make it more opaque.

The example below shows that the background color of the heading gets transparent as we put the value of a as 0.4. However, the child element heading does not get transparent.

Example Code:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

Use Hex Values to Create a Transparent Color in CSS

We often use hex values with six characters followed by # to give a specific color to an HTML element. For example, #A5BE32. We can make the color transparent by adding two numeric values at the end of the hex value and making it an eight-character hex value. For example, #A5BE3280. Here, #A5BE32 denotes the color, and 80 at the end denotes the opacity of the color. If you want a 50% transparent color, you can use the value 80 at the end of the hex code. Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which converted to hex becomes 80. The child element does not get transparent, unlike that of the opacity property.

For example, create an HTML document with heading h1 and class transparent, i.e <h1 class="transparent">Hello world </h1>. Give #A5BE32 background color to the class. Add 80 at the end of the hex code to make it 50% transparent. Such that the hex code becomes #A5BE3280.

The example below shows that the background color of the heading gets 50% transparent as we add 80 at the end of the hex code.

Example Code:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}