JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="boring">Boring</div>
<div class="niiice">Niiice</div>

<div class="boring-2">Ugly</div>
<div class="niiice-2">Wow</div>

SCSS

@function hsl-gradient($start, $end, $steps: 3, $percentages: false) {
    $shades: $start;
    @if $percentages {
      $shades: $shades 0%;
    }
    $start_h: hue($start);
    $start_s: saturation($start);
    $start_l: lightness($start);
    
    $end_h: hue($end);
    $end_s: saturation($end);
    $end_l: lightness($end);
    
    @if ($end_h - $start_h) > 180 {
      $end_h: $end_h - 360deg;
    } @elseif ($start_h - $end_h) > 180 {
      $start_h: $start_h - 360deg;
    }
    
    @for $i from 1 through $steps {
        $shades: $shades, adjust-color(
            $start,
            $hue: ($end_h - $start_h) * $i / $steps,
            $saturation: ($end_s - $start_s) * $i / $steps,
            $lightness: ($end_l - $start_l) * $i / $steps
        );
        @if $percentages {
            $shades: $shades #{100% * $i / $steps};
        }
    }
    
    @return $shades;
}

.boring, .niiice, .boring-2, .niiice-2 {
  padding: 5vh 5vw;
  color: white;
  font-size: 10vh;
}

.boring {
  background: linear-gradient(to right, rebeccapurple, orangered);
}
.niiice {
  background: linear-gradient(to right, hsl-gradient(rebeccapurple, orangered));
}

.boring-2 {
  background: linear-gradient(to right, red, cyan);
}
.niiice-2 {
  background: linear-gradient(to right, hsl-gradient(red, cyan));
}