CSS Opacity

Using the `opacity` Property

The opacity property sets the opacity level for an element, which affects its transparency. The value ranges from 0 (fully transparent) to 1 (fully opaque).

Basic Usage

In this example, the .transparent-box class sets the opacity to 50%, making the element semi-transparent.

Tutorials dojo strip

.transparent-box {
    opacity: 0.5; /* 50% transparency */
}

CSS
​x
 
.transparent-box {    opacity: 0.5; /* 50% transparency */}

Using RGBA Colors for Transparency

RGBA color values are another way to apply transparency. The a in rgba stands for alpha channel, which controls the opacity of the color.

Basic Usage

In this example, the .transparent-bg class sets a red background color with 50% transparency.

.transparent-bg {
    background-color: rgba(255, 0, 0, 0.5); /* Red background with 50% transparency */
}

CSS
 
.transparent-bg {    background-color: rgba(255, 0, 0, 0.5); /* Red background with 50% transparency */}

CSS Opacity and Transperancy Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Opacity and Transparency Example</title>
    <style>
        .container {
            width: 600px;
            margin: auto;
        }
        .transparent-box {
            width: 200px;
            height: 200px;
            background-color: blue;
            opacity: 0.5; /* 50% transparency */
            margin-bottom: 20px;
        }
        .transparent-bg {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.5); /* Red background with 50% transparency */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="transparent-box">This box has 50% opacity.</div>
        <div class="transparent-bg">This box has a red background with 50% transparency.</div>
    </div>
</body>
</html>

CSS
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>CSS Opacity and Transparency Example</title>    <style>        .container {            width: 600px;            margin: auto;        }        .transparent-box {            width: 200px;            height: 200px;            background-color: blue;            opacity: 0.5; /* 50% transparency */            margin-bottom: 20px;        }        .transparent-bg {            width: 200px;            height: 200px;            background-color: rgba(255, 0, 0, 0.5); /* Red background with 50% transparency */        }    </style></head><body>    <div class="container">        <div class="transparent-box">This box has 50% opacity.</div>        <div class="transparent-bg">This box has a red background with 50% transparency.</div>    </div></body></html>

CSS Labs

Tutorials dojo strip