December 2, 2020 · 1 min read

Gradient Text With CSS Custom Properties

Create reusable gradient text styles using CSS custom properties and utility classes.

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...

css

// 👇 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;
  }
}

html

<h1 class="text-gradient text-gradient-red">
  Hi There!
</h1>

See the Pen qBaOOox by Kevin Dees (@kevindees) on CodePen.