<p class="gradient">It's a UNIX System!</p>

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  background: #28223b;
  color: #fff;
  font-family: Arial;
  padding: 50px;
}

p.gradient {
  font-size: 5.5rem;
  font-weight: bold;
  max-width: 18ch;
  /* Base text color used if background:clip is not supported */
  color: #ffe299;
}

@supports (-webkit-background-clip: text) {
  p.gradient {
    /* Pretty gradient thanks to Josh Cormeau's CSS gradient generator
     * https://www.joshwcomeau.com/gradient-generator/?angle=90&easingCurve=0.25%7C0.75%7C0.75%7C0.25&colorMode=hsl&precision=8&colors=e5e59b%7Cffe299%7Cff959d
    */
    background-image: linear-gradient(
      90deg,
      hsl(60deg 59% 75%) 0%,
      hsl(54deg 73% 77%) 8%,
      hsl(49deg 85% 78%) 17%,
      hsl(43deg 100% 80%) 25%,
      hsl(27deg 100% 80%) 33%,
      hsl(11deg 100% 79%) 42%,
      hsl(355deg 100% 79%) 50%,
      hsl(11deg 100% 79%) 58%,
      hsl(27deg 100% 80%) 67%,
      hsl(43deg 100% 80%) 75%,
      hsl(49deg 85% 78%) 83%,
      hsl(54deg 73% 77%) 92%,
      hsl(60deg 59% 75%) 100%
    );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 300% auto;
    animation: textgradient 20s linear infinite;
  }

  @keyframes textgradient {
    from {
      background-position: 0 center;
    }
    to {
      background-position: 300% center;
    }
  }
}