Display gradient text simply with HTML and CSS

Want a bit of fantasy, "neon" or kitsch in your designs? Nothing beats colored text with a gradient to spice up your website or web application!

How it works

In CSS, there's a property called "background-clip" that allows for a very commonly used feature in design software: the "shape mask."

To get gradient text, you simply need to create a "gradient" as the background of your text, and create the shape mask on your text.

Here's a very concrete example, with just a few lines of code.

Tutorial

HTML

<span>Gradient text</span>

Let's take a simple text element, it can actually be any element, but it must be able to contain a background color. This is why the first line of our CSS turns this element into an inline-block.

CSS

display: inline-block;
background: linear-gradient(to left, rgb(255,0,0), rgb(121,121,244));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

We add our gradient (here a linear-gradient) and our shape mask (background-clip) and there you have it!

The result

Here the rendering was done on a black button to improve readability, but feel free to choose your own colors!

To note

The coverage of this feature (background-clip) reaches 98.04% support (with webkit prefix), so you'll have access to it on almost all browsers (except Internet Explorer).

The use of gradients is very sensitive both in terms of design and accessibility, and even more so on text. Be sure of yourself before implementing it in your web designs.

The shape mask can be used to create many other interesting things, which I'll let you discover here!