CSS Opacity

CSS opacity property specifies the transparency level of an element. For example,

img.second {
    opacity: 0.5;
}

Browser Output

CSS Image Opacity Example

Here, the opacity: 0.5 sets the opacity of the second image to 0.5 which means that the image will be 50% transparent.


CSS opacity Syntax

The syntax of the opacity property is,

opacity: number | initial | inherit;

Here,

  • number: sets the opacity level in the range from 0.0 (fully transparent) to 1.0 (fully opaque)
  • initial: sets the property value to the default value (1.0)
  • inherit: inherits the property value from its parent element

The opacity value of 1.0 is equivalent to 100%.

Note: The opacity property affects not only the element itself but also any child elements or content present within it.


CSS Opacity With Background Color

Sometimes we need to set a little bit of transparency to the background color. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS opacity</title>
    </head>

    <body>
        <div class="box box1"><h2>opacity: 1.0</h2></div>
        <div class="box box2"><h2>opacity: 0.7</h2></div>
        <div class="box box3"><h2>opacity: 0.3</h2></div>
        <div class="box box4"><h2>opacity: 0.1</h2></div>
    </body>

</html>
/* styles the div */
div.box {
    height: 100px;
    background-color: orange;
}

div.box1 {
    opacity: 1;
}

div.box2 {
    opacity: 0.7;
}

div.box3 {
    opacity: 0.3;
}

div.box4 {
    opacity: 0.1;
}

Browser Output

CSS Opacity Example

In the above example, the opacity of the div also affects the content of the h1 element. This makes the text hard to read.

We can overcome this issue with the background-color property using the RGBA color value with the required opacity.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS opacity</title>
    </head>

    <body>
        <div class="box box1"><h2>opacity: 1.0</h2></div>
        <div class="box box2"><h2>opacity: 0.7</h2></div>
        <div class="box box3"><h2>opacity: 0.3</h2></div>
        <div class="box box4"><h2>opacity: 0.1</h2></div>
    </body>

</html>
/* styles the div */
div.box {
    height: 100px;
    background-color: orange;
}

div.box1 {
    /* equivalent opacity to 1; */
    background-color: rgba(255, 165, 0, 1);
}

div.box2 {
    /* equivalent opacity to 0.7; */
    background-color: rgba(255, 165, 0, 0.7);
}

div.box3 {
    /* equivalent opacity to 0.3; */
    background-color: rgba(255, 165, 0, 0.3);
}

div.box4 {
    /* equivalent opacity to 0.1; */
    background-color: rgba(255, 165, 0, 0.1);
}

Browser Output

CSS Opacity Example

Here, the content of the h1 element is clearly visible while also maintaining the same previous opacity on the background color using the RGBA color value.


CSS Opacity with Image

The opacity property is often used to create hover effects for images by adjusting their transparency. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS opacity</title>
    </head>

    <body>
        <img
src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="A warm sunset"
        />
        <img src="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="Cloudy mountains"
        />

    </body>
</html>
img {
    width: 350px;
    margin: 8px;

    /* sets the opacity to 0.6 (60%) */
    opacity: 0.6;
}

/* sets the opacity to 1 (100%)  on hovering image */
img:hover {
    opacity: 1;
}

Browser Output

A warm sunset
Cloudy mountains

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges