Clear and robust code tutorials are one of my favorite things to find. I run into just an article on CSS Text Gradients by Sebastiano Guerriero today. The article inspired a thought, “What if we had a text gradient utility class?” If we create a utility CSS class we can make multiple text gradient options using CSS variables.
By using utility CSS classes with CSS variables we can apply a number of background effects by using my favorite feature – custom property inheritance.
Take a look…
// ๐ Set a default text-background
:root {
--text-background: linear-gradient(to right, darkblue, darkorchid);
}
// ๐ Craft a varient using inheritance
.text-gradient-red {
--text-background: linear-gradient(to right, darkred, red);
}
// ๐ Replace the Sebastiano gradient with --text-background
.text-gradient {
color: inherit;
@supports (--css: variables) {
background: var(--text-background);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
<h1 class="text-gradient text-gradient-red">
Hi There!
</h1>
See the Pen qBaOOox by Kevin Dees (@kevindees) on CodePen.
Leave a Reply