<div class="container">
<div class="box0">rgba(255, 0, 0, 0)</div>
<div class="box1">rgba(255, 0, 0, 0.1)</div>
<div class="box2">rgba(255, 0, 0, 0.2)</div>
<div class="box3">rgba(255, 0, 0, 0.3)</div>
<div class="box4">rgba(255, 0, 0, 0.4)</div>
<div class="box5">rgba(255, 0, 0, 0.5)</div>
<div class="box6">rgba(255, 0, 0, 0.6)</div>
<div class="box7">rgba(255, 0, 0, 0.7)</div>
<div class="box8">rgba(255, 0, 0, 0.8)</div>
<div class="box9">rgba(255, 0, 0, 0.9)</div>
<div class="box10">rgba(255, 0, 0, 1)</div>
</div>
div.container{
  display:flex;
  flex-wrap:wrap;
}
div:not(.container){
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:100px;
  margin-left:10px;
  margin-bottom:10px;
}

.box0{
  background:rgba(255, 0, 0, 0);
}

.box1{
  background:rgba(255, 0, 0, 0.1);
}

.box2{
  background:rgba(255, 0, 0, 0.2);
}

.box3{
  background:rgba(255, 0, 0, 0.3);
}

.box4{
  background:rgba(255, 0, 0, 0.4);
}

.box5{
  background:rgba(255, 0, 0, 0.5);
}

.box6{
  background:rgba(255, 0, 0, 0.6);
}

.box7{
  background:rgba(255, 0, 0, 0.7);
}

.box8{
  background:rgba(255, 0, 0, 0.8);
}

.box9{
  background:rgba(255, 0, 0, 0.9);
}

.box10{
  background:rgba(255, 0, 0, 1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.