How to Change Text Opacity in CSS

1. Use the CSS opacity Property to Change Text Transparency in CSS
2. Use the rgba() Function to Change Text Transparency in CSS

This article will introduce two methods to change the text opacity in CSS.

Use the CSS opacity Property to Change Text Transparency in CSS

The opacity property indicates the transparency of an element. It is generally indicated on a scale of 0 to 1, where 0 is completely transparent.

That means it is completely invisible. Likewise, 1 is completely opaque, and 0.5 can be considered the benchmark of element opacity as it is 50% see-through.

For example, create a p element, and create a class before it. Type the text of your choice inside the p element.

Next, create a similar p element with the class after. Select the class before in CSS and specify red as the text color.

For the after class, set the color to red and opacity property to 0.4, on a scale from 0 to 1 as your wish.

Similarly, we can also indicate the opacity of the element via percentage. 0% is completely transparent, and 100% is completely opaque. We can also use40% in place of 0.4.

Example Code:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

Use the rgba() Function to Change Text Transparency in CSS

The rgba() function, in general, is used to insert the color to the element. The letters in rgba() stand for red, green, blue, and alpha.

It indicates that the function takes four values. The alpha option is an extension that denotes the opacity of the element.

We can indicate the intensity of the red, blue, or green color as an integer between 0 to 255 or 0% to 100%. For opacity, we can specify the 0-1 value and, of course, the 0%-100% range.

We can use the rgba() function as the option in the color property.

We will use the same HTML template as in the first example above for a demonstration. Select the class before and write the rgba() function in the color property in CSS.

Write the value 0, 0, 255 in the function, which is the color code for blue color. Use the same color code for the after class but add 0.5 for the opacity value.

As a result, the first text appears in blue, while the second one will be less opaque as we set the opacity in it.

Example Code:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

Thus, considering all the facts, we used the opacity property and the rgba() function to change the text transparency.