CSS - opacity Property

The opacity Property

CSS opacity property controls the transparency of an element. It determines how much of a hidden element’s content is visible. The property can be used on various elements, whether they contain text, images, or serve as backgrounds.

CSS opacity Example

Here is an example of the opacity property. You can change the slider and see the change in opacity and the value of opacity.

Syntax

The syntax for the CSS opacity property is as follows:

opacity: number | percentage | initial | inherit;

Property Values

CSS opacity Property with Numeric Values

To set the transparency level of an element, we can specify numeric values between 0 and 1 including them with the opacity property.

Example

In this example, we have used numeric values to specify the opacity level of div elements.

CSS opacity Property with Percentage Values

To set the transparency level of an element, we can specify percentage values between 0% and 100% including them with the opacity property.

Example

In this example, we have used the percent value to specify the opacity level of div elements.

CSS opacity for Images

You can use the opacity property to set the transparency level of images. Setting the transparency level of an image can help in creating an overlay.

Example

In this example, we have used the opacity property to set the transparency level of the logo at different levels.

CSS opacity Property with RGBA Color Values

The opacity property applies transparency to an element and its child elements. To avoid this and still achieve transparency, we can use the rgba() values. These values specify colors along with opacity only to the desired element.

Example

In this example, we have used the opacity and rgba() functions to highlight the difference between these two.

Supported Browsers