The opacity is defined in CSS as “transparency”. The text opacity is the transparency effect we apply to any text. We have two different properties in CSS for setting the opacity of the text. To set the opacity of the text, we’ll use the “opacity” property as well as the alpha-value which determines the opacity of the text in “RGBA”. Using the opacity property and modifying the alpha value in RGBA, we can adjust the opacity of the text in CSS. The opacity ranges between “0.0” and “1.0.” The “completely transparent” color has a value of “0.0” while the “totally opaque” color has a value of “1.0”. We’ll use CSS properties to modify the opacity of the text in this guide.
Example # 1: Using Opacity Property
We need some paragraphs to use the opacity feature in CSS. We’re going to make some HTML paragraphs here. To do so, we must first construct the HTML file. Visual Studio Code is the software we’ll be utilizing to perform these examples. You may do this in any software like notepad. We are making some “div” classes with different names in the body. Inside each div, we are creating a paragraph with the “<p>” tag. We’re going to make three divs with unique names like “t1,” “t2,” and “t3”. We are creating paragraphs inside these divs. As a result, three paragraphs have been created. We will use this HTML code for other examples as well. Now, we’ll go to the CSS file and apply the CSS opacity to the text. In the HTML code’s “head” element, we additionally linked the CSS file to this HTML page.
We set the original “red” color to the heading by using the “color” property and style this heading as “italic”. Then, we use the name of the first div “t1” in which we have a paragraph and set its “font-size” to “16px”. We use the “red” for the font “color”. But in the next line, we are using the “opacity” property. So, when we use this property, it will add some opacity to the transparency effect of our text color. Here, we are setting a “0.8” value to this “opacity” property. For the next “div.t2” paragraph, we set the same “font-size” “16px” and the same “red” “color”. But this time the value of the “opacity” is changed to “0.5” for the second div’s paragraph. For the third and the last “div.t3”, we are using “0.3” as the “opacity” value.
Here is the output, see that the color of the text appears with different opacity values. The heading’s color is the original red color, but the color of the paragraphs appears with some opacity values. All three paragraphs have different opacity values.
Example # 2: Using alpha value in RGBA
Here, we are going to utilize the RGBA values in which “a” is for alpha value and this alpha value sets the opacity of the text. First, we simply put the RGB value to the heading and the RGB value we are using here represents the “purple” color. Then, we use the “italic” keyword for setting the “font-style” of the heading. We also set it as “font-family” and utilize the “Algerian” font for this. It is aligned in the “center” by utilizing the “text-align” property.
Then, we are going to utilize the first “div.t1” and use the “RGBA” value. Here, we put the “RGB” value of purple color and then set its alpha value also to “0.9”. After this, we set the same “RGB” value but changed the alpha value and set it to “0.7”. Also, we have another div paragraph and for this last “div.t3” paragraph, we use the “0.5” alpha value which sets its opacity to “0.5” value.
Notice in the result how the text color changes depending on the alpha value. The color of the heading is the original purple. But the color of the paragraphs has some alpha values which sets its opacity. The opacity values in all three paragraphs are different.
Example # 3:
First, we are going to set the “background-color” of the entire body and set it to “black”. Then, we again use RGBA values where “a” stands for alpha value. This alpha value determines the text’s opacity as we discussed above. To begin, we simply add the RGB value to the heading, the RGB number we’re using here symbolizes the color “light grey”. We are using the first “div.t1” and the “rgba” value where we are inserting the “RGB” value of the same color as the heading and set its alpha value to “0.7”. After that, we set the same “RGB” value as before. This time, we changed the alpha value to “0.4”. We also have another div paragraph and we use the “0.2” alpha value to change the opacity of this last “div.t3” paragraph to “0.2”.
Observe how the text color varies as the alpha value changes. The heading is the original color but the color of the paragraphs includes alpha values that determine their opacity. All three paragraphs have distinct opacity values.
Example # 4:
We are creating nine different div classes here with a unique name for each div and going to apply all opacity values on each div separately in CSS.
We are styling the entire body and setting the text in the “center” of the page. So, all the paragraphs appear in the “center”. We also set “bold” for all “body” using “font-weight” and set the size of the font or text to “20px”. Our heading will appear in the original “maroon” color as we are setting this color in the “color” property. The “Algerian” is the “font-family” for the heading. We set the same color for all divs by using the “color” property. In all div’s paragraphs, we have changed the value of the “opacity”. In each div we decrease the value of the opacity by one such for other divs we set the value of the “opacity” to “0.9”. Then, for the next div we are setting the value of this opacity property to “0.8”. For the third div, we are using “0.7” opacity value and so on. In this way, we are changing the opacity values each time for each div.
Here, look at the output below, the text opacity values start from “0.9” and end at “0.1”. The original color is also used here for the heading and all the paragraphs contain opacity values.
Conclusion:
We have created this guide for you in which we change the opacity of the text and learn how to modify the opacity of the text in CSS. We have explained here that opacity is used for giving a transparent effect to the text. We have also explored the CSS properties by which we can change the opacity of the text. We have described and demonstrated how to use the “opacity” property and the “alpha” value of RGBA to change the opacity of the text.
