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>
Updated on 01-Jul-2020 10:50:40