<h1>CSS <a href='#'>Gradient text</a> demo</h1>
<p>Key Points:</p>
<ul>
  <li>Choose a bold font.</li>
  <li>Define <code>background-image</code> as <code>linear-gradient</code>.</li>
  <li>Define <code>background-clip</code> to <code>text</code>.</li>
  <li>Define text <code>color</code> to <code>transparent</code>.</li>
</ul>
h1 a {
  background-image: linear-gradient(to bottom right, yellow, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  // text-fill-color: transparent;
}
h1 a:hover {
  background-image: linear-gradient(to top right, yellow, red);
}

h1 {  
  font-weight: 900;
}

body {
  font-family: system-ui, sans-serif;
}

/*** Not related ***/

body {
  padding: 1em;
}
h1 a {
  // text-decoration: none;
}

code {
  background-image: linear-gradient(to bottom right, orange, red);
  -webkit-background-clip: text;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 700;
}

::selection {
  background: orange;
  color: white;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.