Gradient Text In CSS
Tags: webdev, tutorial, css
Published: 2021-01-11 15:29:06


It can be hard to make a website stand out.

So here’s a little trick that will improve any landing page or header: Use gradient text.

Just make sure to not overuse it. Gradients should never be used for longer text. Instead, use them to make headings or specific words more eye-catching.

What might surprise you — especially if you have prior experience with design tools — is that you can’t set a gradient as the text color directly. For example `color: linear-gradient(yellow, red);` won’t work.

But gradient text **can** be achieved in CSS, it just requires a few extra steps.

It’s best to start with some big, preferably bold text. This will make the gradient more visible and the text more readable.

![Starting Text - Big, bold and black](https://dev-to-uploads.s3.amazonaws.com/i/lj8eobfndkd23m46kaat.png)

The text I’ll be using is styled using the [font shorthand](https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd) with the following values:

```css
font: bold 120px Poppins, sans-serif;
```

---

### Step 1: Add a Gradient

First, we need to add the gradient as a background.

![Text with a top to bottom gradient background](https://dev-to-uploads.s3.amazonaws.com/i/cf2zw7gtu2eepb3ddra5.png)

By default the gradient will go from top to bottom, but we can also specify a direction.

If you want a horizontal gradient, `to right` will do the trick, but a slight angle like `60deg` looks more natural.

```css
background-image: linear-gradient(60deg, #E21143, #FFB03A);
```

![Text with a left to right gradient background](https://dev-to-uploads.s3.amazonaws.com/i/pbc0a2dagfgqkpvmv318.png)

If you want to learn how to create any gradient you want, or simply need a refresher, check out my [Ultimate Guide to CSS Gradients](https://dev.to/hadrysmateusz/complete-guide-to-css-gradients-1eck).

### Step 2: Clip It

Now, we need to make the gradient only show where the text is. We can do that by using `background-clip`.

![Four images showing effects of different background-clip values](https://dev-to-uploads.s3.amazonaws.com/i/vnxzpk142spn1xz6gjl3.png)

> To learn more about this and other background properties, check out my article explaining [all background properties](https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4).

You might already know that this property lets us clip the background to the border, padding, or content [box](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) of an element. 

But it can also clip the background to the text.

```css
.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}
```

If you try this code, it will look like the gradient just disappeared. That’s because the gradient is **under** the text.

### Step 3: Reveal It

To show the gradient underneath our text, we need to make the text transparent. We can do that by setting `color: transparent`.

![gif showing a transition between black and gradient text](https://dev-to-uploads.s3.amazonaws.com/i/t3rtrlucc4mwr6v1nzjb.gif)

```css
.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}
```

You might be tempted to use the [background shorthand](https://dev.to/hadrysmateusz/the-fastest-way-to-set-css-backgrounds-3m2j) here. Don’t.

Unfortunately, the `background` shorthand version of `background-clip` doesn’t support the `text` keyword.

## Fallback

If you must support Internet Explorer, you'll have to fallback to a flat color. 

Wrap everything we've written before in an `@supports` rule. This way it'll only be rendered in modern browsers.

Then, outside of the `@supports` block, set a fallback color for the text. It should probably be a color that appears in your gradient and works well with the rest of the design.

```css
.gradient-text {
  color: red;
}

@supports (background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(60deg, #E21143, #FFB03A);
    background-clip: text;
    color: transparent;
  }
}
```

Make sure the fallback comes before the actual gradient styles.

> **NOTE:** Even though the @supports rule itself is also not supported in IE, everything inside will still be ignored, which is exactly what we want.

---

*Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. [Follow me](https://twitter.com/HadrysMateusz) for more web development tips.*

### Some other articles you might enjoy

- [Easy Custom List Styles with Modern CSS](https://dev.to/hadrysmateusz/custom-list-styles-using-marker-before-4gi4)
- [Full Text Styling with a Single Line of CSS](https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd)
- [How to Use Multiple Versions of NodeJS on Windows](https://dev.to/hadrysmateusz/how-to-use-multiple-versions-of-node-on-windows-1op9)