CSS Opacity

The opacity property in CSS is used to set the transparency level of an element. It accepts values ranging from 0 (completely transparent) to 1 (completely opaque). This property affects not only the background of the element but also its text and any other child elements.

Syntax:


selector {
    opacity: value;
}

value: A number between 0 and 1, inclusive. 0 represents full transparency, and 1 represents full opacity.

Semi transparent (50% transparent)


      .semi-transparent {
            opacity: 0.5; /* 50% transparent */
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
        }

This is semi-transparent (opacity: 0.5).

Try it Yourself

Fully transparent (100% transparent)


      .fully-transparent {
            opacity: 0; /* 100% transparent */
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
        }

Note:- if opacity is 0 then date will not be display.

Try it Yourself

CSS Opacity – Interview Questions

Q 1: What is opacity?

Ans: Controls element transparency.

Q 2: Opacity value range?

Ans: 0 to 1.

Q 3: Does opacity affect child elements?

Ans: Yes.

Q 4: Alternative to opacity?

Ans: RGBA colors.

Q 5: Default opacity value?

Ans: 1.