Demon Tech Roadmap

CSS

CSS Opacity

CSS opacity controls the transparency of an entire element.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS opacity makes elements see-through. Developers use it to fade images or create subtle overlay effects. The property affects the element and everything inside it, including text and children elements.

Example

1/* this makes an image transparent */
2img {
3  opacity: 0.5;
4}
5
6img:hover {
7  opacity: 1.0;
8}

Key Points

Opacity values range from 0.0 to 1.0.
A value of 0.0 makes the element completely invisible.
A value of 1.0 makes the element fully solid.
Child elements inherit the transparency.

Up Next

Continue your journey with the next topic.

Go to CSS Attribute Selectors ❯