CSS Opacity

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Opacity property is used to control the transparency level of an element.

Opacity determines how visible or transparent an element appears on a webpage. The supporting concepts are explained in CSS Colors and Blending & Backdrop.

The opacity value ranges from:

0 -> Completely transparent (invisible)
1 -> Fully visible (default)

Opacity is commonly used for:

Image hover effects
Overlays
Background effects
Modern UI designs
Fade animations

Syntax

Opacity Syntax

css

selector {
    opacity: value;
}

PreviousCSS Filters NextClipping & Masking

Value	Description	Example
0	Completely transparent	opacity: 0;
0.25	Mostly transparent	opacity: 0.25;
0.5	Semi-transparent	opacity: 0.5;
0.75	Slightly transparent	opacity: 0.75;
1	Fully visible	opacity: 1;

CSS Opacity Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity Example</title>
    <style>
        .box {
            width: 250px;
            padding: 20px;
            background-color: #007acc;
            color: white;
            opacity: 0.7;
            margin-bottom: 20px;
        }
        img {
            width: 250px;
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }
        img:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        This box has 70% opacity.
    </div>
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Opacity Example">
</body>
</html>

CSS Opacity

Syntax

Attributes

Example

Browser Support

Notes

Common Opacity Levels

Hover Effect Example

Opacity vs RGBA

Conclusion