CSS Opacity

This property is used to specify the transparency of an element. In simple words, it determines the clarity of an image, indicating whether the image is clear or not.

The opacity property accepts a value from 0.0 to 1.0. A setting of opacity: 1; would make the element completely opaque (i.e., 0% transparent), while opacity: 0; would make the element completely transparent (i.e., 100% transparent).

CSS Opacity for All Browser

We can provide opacity to any element using opacity property.

Input:-

Output:-

CSS Opacity in Internet Explorer 8 and lower

Internet Explorer 8 and lower version supports a Microsoft-only property "alpha filter" to control the transparency of an element.

Input:-

Output:-

CSS Image Opacity

We can achieve image transparency using CSS Opacity. Below, we are illustrating images with varying levels of opacity.

Input:-

Output:-

Change Image Opacity on Mouse Over

We can control the opacity of an image when the mouse hovers over it. The following example demonstrates an image with an initial opacity of 0.25, which changes to an opacity of 1 on hover.

Input:-

Output:-

Text in Transparent Box

When applying opacity to an element, both the background and the child elements of the element become transparent. This can make the text inside the transparent element hard to read, particularly when using higher opacity values.

Input:-

Output:-

To overcome this, we have this rgba color notation, it has 4 values, the last value, value of 'a' stands for opacity value.

CSS Transparency Using RGBA

One important characteristic to note about RGBA transparency is that — the ability to control the opacity of individual colors. With RGBA, we can make the text color of an element transparent and leave the background intact.

Input:-

Output:-

Here, the opacity of the background changes, but the content is fully visible, no opacity is applied to it.