How to Make a Semi-Transparent Background with CSS

One design feature that can cause some difficulties is making a semi-transparent background when we want an opaque text on it. In this snippet, you can find a solution to this problem.

So, if you want the background of a <div> to be semi-transparent, and the text to be opaque, you’ll simply need an RGBA value for the background, which adds an alpha-transparency to the color.

We’ll start with creating HTML.

Create HTML

Use a <div> with a class name "container".

How to Make a Semi-Transparent Background with CSS

<div class="container">W3Docs</div>

Add CSS

Add the background property with the RGBA value to the container.

How to Make a Semi-Transparent Background with CSS

.container {
  background: rgba(170, 187, 97, 0.5);
}

The final code looks like the following.

Example of making a semi-transparent background:

How to Make a Semi-Transparent Background with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: rgba(170, 187, 97, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">W3Docs</div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">``<div class="example">W3Docs</div> </div>In the example above, we set the RGBA transparency value to 0.5 for the background of the <div>. The value can be in the range from 0 (fully transparent) to 1 (fully opaque).

For more browser compatibility, it is a good practice to use a fallback background color. We’ll use the RGB value without the alpha transparency.

Example of making a semi-transparent background with a fallback:

How to Make a Semi-Transparent Background with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: rgb(170, 187, 97);/* Fallback */
        background: rgba(170, 187, 97, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">W3Docs</div>
  </body>
</html>

Try it Yourself »

Let’s see another example.

Example of making a semi-transparent background using the background-color property:

How to Make a Semi-Transparent Background with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: rgba(255, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <p>
      <span>W3Docs!</span>
    </p>
  </body>
</html>

Try it Yourself »

In this example, we used the background-color property, and here also we set a RGBA value.

It’s important to note that the RGBA value is different from the opacity property. Unlike a RGBA value, the opacity property will affect not only the background of an element; all the child elements will have the same transparency as the background. Thus, it can cause difficulty when reading the text.

Now, let’s see one more example where we use the opacity property just to demonstrate its difference from the previous examples.

Example of making a transparent background using the opacity property:

How to Make a Semi-Transparent Background with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #ff7c73;
        padding: 10px;
      }
      div.first {
        opacity: 0.1;
      }
      div.second {
        opacity: 0.3;
      }
      div.third {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div class="first">
      <p>opacity 0.1</p>
    </div>
    <div class="second">
      <p>opacity 0.3</p>
    </div>
    <div class="third">
      <p>opacity 0.6</p>
    </div>
    <div>
      <p>opacity 1 (default)</p>
    </div>
  </body>
</html>

Try it Yourself »