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.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Involved & Explore More

an abstract painting with blue and yellow colors

Catch up on what I’ve been writing lately.

Show your gratitude.

Join Dare To Code Email List

Get emails from me on full-stack PHP development by subscribing to the Dare To Code mailing list.