Gradient Text With CSS Custom Properties

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.