CSS opacity

Author: Michal Szymanski

The opacity property specifies the opacity/transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Picture of a cat

Opacity 0.2

Picture of a cat

Opacity 0.5

Picture of a cat

Opacity 1 (default)



                    img {
                      opacity: 0.5;
                    }
      
                


                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
Previous lesson Next lesson
Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.