Set the opacity for the background color with CSS

CSSWeb DevelopmentFront End Technology

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>
Published on 09-May-2018 09:01:46