CSS Effects

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

Opacity Example

css

img {
    opacity: 0.5;
}

Makes the image 50% transparent.

Attributes

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;

Example

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
opacity	1	12	1	2

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Opacity affects the entire element, including its content.
Child elements inherit the parent's opacity effect.
Values must be between 0 and 1.
Frequently used with hover effects and overlays.

Common Opacity Levels

css

opacity: 0.2;
opacity: 0.5;
opacity: 0.8;
opacity: 1;

Hover Effect Example

css

img {
    opacity: 0.6;
}
img:hover {
    opacity: 1;
}

Creates a popular image-hover effect.

Opacity vs RGBA

RGBA Background Transparency

css

background-color: rgba(0, 122, 204, 0.5);

Only the background becomes transparent.

Element Opacity

css

opacity: 0.5;

The entire element becomes transparent.

Conclusion

The CSS Opacity property provides a simple way to create transparency effects for elements and images. By adjusting visibility levels, you can build modern interfaces, interactive hover effects, and visually appealing overlays with minimal code.

PreviousCSS Filters NextClipping & Masking