How to Set Transparency With Hex Code in HTML

1. Use the CSS Hexcode to Provide Transparency to the Background in HTML
2. Use the CSS opacity Property to Make the Background Transparent in HTML
3. Use the CSS background Property to Make the Background Transparent in HTML

This article will introduce methods to add transparency to HTML elements. We will use CSS to add transparency.

Use the CSS Hexcode to Provide Transparency to the Background in HTML

We can use the CSS hex code to provide transparency to an HTML element. We can set the hex code as the background property’s value. The hex code that we will be using is eight digits. The format of the eight-digit hex code is #RRGGBBAA. The first six digits represent the hex code for red, green, and blue, respectively. The last two digits are the hex code for opacity.

For example, create a div and write some text in it. In CSS, select the div and set the background property to #00ff0080. The hex code #00ff00 represents the green color, and 80 represents the opacity of the color. This will create a green background in the text and give the opacity of 50% or the value 128. The binary equivalent of the hexadecimal value 80 is 128. Thus, we can use hex code to create a transparent element in HTML.

Example Code:

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

Use the CSS opacity Property to Make the Background Transparent in HTML

We can create a transparent background using the opacity property in CSS. We can use this property on any elements in HTML and can make the background transparent. The opacity property sets the opacity of an element. It is responsible for setting the degree to which the content behind an element is hidden. The value ranges from 0.0 to 0.9. The lower values resemble the lowest level of opacity and vice versa. It means that when the opacity value is near to 0.0, the content behind the element is more visible. And the content seems more transparent. We can also use the % representation to set the opacity. It ranges from 0% to 100%.

For example, create a div with the class bg. Write some text as an element between the div. In CSS, select the div element and set the background to yellow using the background-color property. Then, select the bg class using the class selector. Next, set the opacity to the value of 0.5.

The example below creates a background color of yellow, and there is some text written in it. The 0.5 opacity value adds some amount of transparency to the element. We can change the value from 0.0 to 1.0 to test the degree of opacity in the following example. Thus, we added transparency to the background color in the tutorial.

Example Code:

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

Use the CSS background Property to Make the Background Transparent in HTML

There is a drawback to using the opacity property. The opacity value set in the parent element applies to all the children elements. To get rid of this problem, we can use the CSS background property. We can specify the rgba value to the element and prevent it from applying opacity to child elements. The background property uses the rgba() function to specify the RGB colors with their opacity. The syntax of the function is shown below.

rgba(red, green, blue, alpha)

We can specify the intensity of the RGB values in the range of 0 to 255. We can also represent the percentage value in the range of 0% to 100%. We can specify the value of alpha as we discussed in the first method.

Make some CSS changes to the code example of the first method. In the selection of div, remove the background-color property and add the background property. Write the rgba() function as the value of the property. Set the value of red as 255 and set 0 for green and blue. Write the alpha value as 0.2. Then, remove the bg class selection.

The code snippets below will create a red background in the text and adds a degree of transparency.

Example code:

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}