Classical Drawing Gradients

classical-drawing-gradients.markdown

Classical Drawing Gradients

A Pen by Chris Tsongas on CodePen.

License.

index.html

<div class="outer"><div class="inner"></div></div>
<p>&nbsp;</p>
<div class="outer empty"><div class="inner"></div></div>

style.css

div {
  box-sizing: border-box;
}
.outer {
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #777;
  background: linear-gradient(to right, #000 0%, #fff 100%);
}
.empty {
  background: none;
}
.inner {
  width: 250px;
  height: 25px;
  background-color: #777;
}