Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}
div.first {
  background: rgba(76, 175, 80, 0.1);
}
div.second {
  background: rgba(76, 175, 80, 0.3);
}
div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<h2>Using the opacity property:</h2>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<h2>Using RGBA color values:</h2>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
</body>
<!-- Mirrored from www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity_box2 by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 05 Sep 2022 15:17:13 GMT -->
</html>