DEV Community

Cover image for CSS Gradient text effect
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Gradient text effect

Today we are creating a super cool and pretty quick CSS effect.
I really love this effect. It's not super happy and can be made by just CSS.

Because it's CSS based, we have the option even to animate it if we want to. (I'll leave that up to you)

The end result of today's article:

CSS Gradient effect

I'll be guiding you to create this cool effect yourself, in just a couple of lines of CSS!

HTML Structure

As for the HTML, we only need the following:

<h1>Super Cool<br />Gradient Effect</h1>
Enter fullscreen mode Exit fullscreen mode

As you can see, I've added a break (<br />) just because I like to showcase it even works on two lines.

CSS Gradient text effect

Now let's move to our CSS setup.

We'll start by styling our body, so we center our element inside the <h1>.

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #000;
}
Enter fullscreen mode Exit fullscreen mode

I use CSS Grid to center everything perfectly.

Then in my example, I'm using a black background to make it pop more.

Now we need to get cracking on our heading style.

h1 {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6vmax;
}
Enter fullscreen mode Exit fullscreen mode

We start by defining a font we like and making it nice and big.
I'm using a 6vmax, which is a scalable viewport unit.

This results in the following:

CSS gradient text step 1

The next step is to add our gradient. We are using the background-image to set our gradient.

h1 {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6vmax;
  background-color: #5390d9;
  background-image: linear-gradient(45deg, #6930c3, #5390d9);
}
Enter fullscreen mode Exit fullscreen mode

As you can see, I also set a fallback color in case the gradient isn't supported.

I'm using a basic CSS linear gradient with only two colors.
You can extend these to support even more colors or fancy gradients.

You can use this cool generator for CSS gradients

Our result so far is pretty weird:

CSS Linear gradient text

As you can see above, the text is now black and has a gradient surrounding it. It's close, but we're not there yet.

Let's add the text gradient effect.

We make use of the background-clip property and set the text-fill-color to transparent.

The background-clip makes sure the gradient goes on top of the text, and the text-fill will make it pop through.

h1 {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6vmax;
  background-color: #5390d9;
  background-image: linear-gradient(45deg, #6930c3, #5390d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Now we get this amazing result, have a look around on this Codepen.

See the Pen eYdgOVg by Chris Bongers (@rebelchris) on CodePen.

Browser Support

This whole setup doesn't have full support, but the elements these days are quite widely supported.

I've shown the background-clip since it's an important part.

CSS background-clip support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (6)

Collapse
 
maksimepikhin profile image
Maksim N Epikhin (PIKHTA)

Look at CSS Gradient Online tool for increase you code speed cssgradient.io

Collapse
 
dailydevtips1 profile image
Chris Bongers

I even linked that in the article ;)

You can use this cool generator for CSS gradients

Collapse
 
maksimepikhin profile image
Maksim N Epikhin (PIKHTA)

Sory :D

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Haha no worries, we were like-minded 👀

Collapse
 
dalinex profile image
Lorin Cerina

I love this one for gradients --> mycolor.space/gradient3

Collapse
 
dailydevtips1 profile image
Chris Bongers

Oh that looks really cool! ✌️
Thanks for this