How to change opacity of paragraph using CSS?

Answer

To change opacity of paragraph using CSS, you can set the opacity style property for the paragraph elements with the values like 0.1, 0.5, 0.9, etc.

CSS Code

The following is the typical CSS code to change opacity of paragraph in HTML page using tag name p.

Using 10% opacity

p {
   opacity: 0.1;
}

Using 50% opacity

p {
   opacity: 0.5;
}

Using 90% opacity

p {
   opacity: 0.9;
}

Examples

We shall go through some working examples on how to change opacity of paragraph using CSS. In the following examples, you may change the value of opacity and Run the code to visually observe the changes made to the Paragraph elements.

Example 1

This is an example on how to change opacity of paragraph using 10% opacity.

You may edit the following code, and click on Run button.

Example 2

This is an example on how to change opacity of paragraph using 50% opacity.

You may edit the following code, and click on Run button.

Example 3

This is an example on how to change opacity of paragraph using 90% opacity.

You may edit the following code, and click on Run button.