CSS Opacity

The CSS `opacity` property is used to set the transparency level of an element. It allows you to control how opaque or transparent an element appears, affecting its visibility and how it blends with background elements. This property can be useful for creating various visual effects, such as making elements fade in or out.

Understanding the Opacity Property

The `opacity` property takes a value between 0 and 1:

• 0: Fully transparent (invisible).
• 1: Fully opaque (fully visible).
• 0.5: 50% transparent.

Syntax

The syntax for the CSS `opacity` property is:

/* Opacity Property Syntax */
selector {
    opacity: ;
}

        

Examples

/* Fully Opaque Element */
.opaque {
    opacity: 1;
}

            

/* Semi-Transparent Element */
.semi-transparent {
    opacity: 0.5;
}

            

/* Fully Transparent Element */
.transparent {
    opacity: 0;
}