Using HSL for gradients.

by DominoPivot

HTML

<div class="two">2-color gradient</div>
<div class="custom">3-color gradient adjusted lightness</div>
<div class="three">3-color gradient</div>

CSS

.two {
  background:
    linear-gradient(
      to right,
      hsl(187, 70%, 50%),
      hsl(293, 70%, 50%)
    );
  color: white;
}

.three {
  background:
    linear-gradient(
      to right,
      hsl(187, 70%, 50%),
      hsl(240, 70%, 50%),
      hsl(293, 70%, 50%)
    );
  color: white;
}

.custom {
  background:
    linear-gradient(
      to right,
      hsl(187, 70%, 50%),
      hsl(240, 70%, 60%),
      hsl(293, 70%, 50%)
    );
  color: white;
}

div {
  font-size: 2em;
  line-height: 2;
  padding: 0.5em;
}