• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Home
  • Blog
  • Search

Kevin Dees

Full-Stack PHP Development

  • Twitter
  • Github
  • LinkedIn
You are here: Home / Web / Gradient Text With CSS Custom Properties

Gradient Text With CSS Custom Properties

December 1, 2020 by Kevin Leave a Comment

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.

Filed Under: CSS, Design, HTML, Tips, Web

Reader Interactions

Leave a Reply Cancel 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.

Footer

Get Dare To Code

Get the latest on full-stack PHP development in your inbox with a monthly lesson from Kevin Dees.

Kevin Dees is a speaker, entrepreneur, blogger, and developer. He’s best known for his work in WordPress and podcasting for the retired SitePoint show. Kevin has developed sites for the brands Verizon, Denny’s, RIDGID, Michelin, and others. Currently, he is working on TypeRocket which powers over 10,000 professional websites and products internationally.

Copyright © 2021 · Kevin Dees · Log in