HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
CSS Tutorial

CSS Effects

CSS Opacity

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

ValueDescriptionExample
0Completely transparentopacity: 0;
0.25Mostly transparentopacity: 0.25;
0.5Semi-transparentopacity: 0.5;
0.75Slightly transparentopacity: 0.75;
1Fully visibleopacity: 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>

Output

Browser Output

css

The blue box will appear slightly transparent
The image will initially appear faded
When the user hovers over the image, it will become fully visible
Smooth transition effects will improve the user experience

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE
YesYesYesYesYesYes

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

Common Opacity Levels

css

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

Hover Effect Example

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 FiltersNextCSS Transform