<div class="item default-gradient">
  默认线性渐变
  <span>background-image: linear-gradient(yellow, red);</span>
</div>
<div class="item gradient-0deg">
  0deg渐变
  <span>background-image: linear-gradient(0deg, yellow, red);</span>
</div>
<div class="item gradient-45deg">
  45deg渐变
  <span>background-image: linear-gradient(45deg, yellow, red);</span>
</div>
<div class="item gradient-90deg">
  90deg渐变
  <span>background-image: linear-gradient(90deg, yellow, red);</span>
</div>
<div class="item gradient-180deg">
  180deg渐变
  <span>background-image: linear-gradient(180deg, yellow, red);</span>
</div>
<div class="item gradient--90deg">
  负90deg渐变
  <span>background-image: linear-gradient(-90deg, yellow, red);</span>
</div>
.item{
  width: 200px;
  height: 200px;
  font-size: 2rem;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 6px #888;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 12px;
}
span{
  font-size: 12px;
}
.default-gradient{
  background-image: linear-gradient(yellow, red);
}
.gradient-0deg{
  background-image: linear-gradient(0deg, yellow, red);
}
.gradient-45deg{
  background-image: linear-gradient(45deg, yellow, red);
}
.gradient-90deg{
  background-image: linear-gradient(90deg, yellow, red);
}
.gradient-180deg{
  background-image: linear-gradient(180deg, yellow, red);
}
.gradient--90deg{
  background-image: linear-gradient(-90deg, yellow, red);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.