Set the opacity for the background color with CSS

To set the opacity for the background color, use the opacity property with RGBA color values.


You can try to run the following code to implement the opacity property:

Live Demo

<!DOCTYPE html>
         div {
            background: rgb(40, 135, 70);
            padding: 20px;
         div.first {
            background: rgba(40, 135, 70, 0.2);
         div.second {
            background: rgba(40, 135, 70, 0.6);
      <p>RGBA color values</p>
      <div class = "first"><p>20% opacity</p></div>
      <div class = "second"><p>60% opacity</p></div>
      <div><p>Default Opacity</p></div>