Add gradient effects to your headings with CSS

Tags

  • CSS
  • HTML
Posted on
17 September 2024
Posted in
Tutorial
Posted by
Trevor Saint

Share this article on

To apply a gradient colour to your text, we first need to create a background gradient which includes a few properties (angle, start and finishing colours).

.text-gradient {
  background: linear-gradient(45deg, #f3ec78, #af4261);
}

We then need to clip the background using the text as a clipping mask, and hide the text.

.text-gradient {
  background: linear-gradient(45deg, #f3ec78, #af4261);
  background-clip: text;
  color: transparent;
}

We can also progressively support older browsers, by including a fallback.

/* Show a solid colour in older browsers (e.g. IE11) */
.text-gradient {
  color: #f3ec78;
}



/* Show text gradient in modern browsers */
@supports (--css: variables) {
  .text-gradient {
    background: linear-gradient(45deg, #f3ec78, #af4261);
    background-clip: text;
    color: transparent;
  }
}

Preview for “Add gradient effects to your headings with CSS”

HTML for “Add gradient effects to your headings with CSS”

<h1 class="text-gradient">Text Gradient</h1>

CSS for “Add gradient effects to your headings with CSS”

/* Show the solid colour in older browsers (e.g. IE11) */
.text-gradient {
  color: #622de0;
}

/* Show text gradient in modern browsers */
@supports (--css: variables) {
  .text-gradient {
    background: linear-gradient(45deg, #622de0, #ff4081);
    background-clip: text;
    color: transparent;
  }
}