<div class="flex flex-center height-100vh padding-md">
  <h1 class="text-gradient">Text Gradients</h1>
</div>
// 💡 How to create text gradients in CSS
// 🔗 https://codyhouse.co/nuggets/text-gradients

.text-gradient {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  color: darkblue;
  
  @supports (--css: variables) {
    background: linear-gradient(to right, darkblue, darkorchid); // create bg gradient
    color: transparent; // hide text fill
    background-clip: text; // use text as clipping mask for bg
  }

  &::selection {
    color: white;
    background: darkorchid;
  }
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.