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;
        }

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