<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
This Pen doesn't use any external JavaScript resources.