Even though there are multiple ways to get the same result, in this case, with just three lines we are able to get a similar result to the image.

We’re not going to do a lot of HTML, in fact for this example we just need one element and add it a class.

<h1 class="text">Hello.</h1>

And to the effect, we basically only need three properties

  • background: To apply the linear gradient
  • -webkit-background-clip: To make blend the color and the text
  • -webkit-text-fill-color: To make visible our result

Regardless of the use of the prefix -webkit, background-clip is highly supported by most browsers. But in our case, the value we’ll be using is not. We need to set it up as text and currently, that’s an experimental feature.

Compatibility of background-clip: text1caniuse.com, CSS property: background-clip: text..

And that’s pretty much the same case of text-fill-color, caniuse.com says:

This feature is non-standard and should not be used without careful consideration2caniuse.com, CSS property: -webkit-text-fill-color.

Basically our .text class would look like this (these are our three lines):

.text{
  background: linear-gradient(90deg, #456990, #e5446d, #ffe66d 15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

And we would get this:

Text with the essential styles

The rest of the code is basically experimentation and what you would like to see. For instance, you can play with the background-size to get variations on the gradient result. To get the exact same result of the cover image you can check out the following codepen.

See the Pen Gradient text snippet by Dager (@dagerzuga) on CodePen.dark

References   [ + ]