CSS Opacity - Detailed Overview

Introduction to CSS Opacity

The opacity property in CSS specifies the transparency level of an element. It takes a value from 0 (completely transparent) to 1 (completely opaque). You can use this property to create various visual effects by controlling the transparency of elements.

Examples of Opacity

Here are some examples demonstrating different levels of opacity:

.opaque {
    opacity: 1;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

.semi-transparent {
    opacity: 0.5;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

.transparent {
    opacity: 0.2;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

.hidden {
    opacity: 0;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 5px;
}