How to add a Text Gradient Color with CSS

Learn how to add a linear gradient color to your text elements with CSS, and how to avoid a common gradient mistake.

To add a gradient text color to your HTML text elements, you’ll need the following CSS properties:

Why are we using the background property for coloring text? The approach does seem a bit hacky, but I promise that it works!

Let’s create a quick example where we apply a linear gradient from left to right on a text element, using the following two colors, orange and red:

An heading element with a class attribute called text-gradient :

h2 class="text-gradient">Gradient text color!h2>

Add color gradient styles to the .text-gradient class:

.text-gradient  /* Set the background color */ background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%); /* Mask the color to the text, and remove the rest */ -webkit-background-clip: text; /* Make the text fill color value transparent so the masked background color comes through */ -webkit-text-fill-color: transparent; >

Gradient text color!

Do you notice a problem with how the two colors are applied to the text element? The colors are applied unevenly.

The linear-gradient CSS function takes two color values:

And it’s supposed to spread from 0 to 100% evenly, as specified in the CSS:

(to right, #ff8a00 0%, #DD4C4F 100%)

So we want this on the text element:

But our text example almost entirely orange:

Gradient text color!

Tip: if you toggle the color theme on this website to dark mode (click on the Moon icon) it’s easier to see.

It happens because the heading element is a block-level element, by default. This means that their background spans the entire width of their parent container.

This makes the colors from the gradient class ( .text-gradient ) that we added to the element stretch beyond the width of your text because it’s targeting the background property.

I’ll add a border to the text example to make my point clear:

Gradient text color!

Text gradients should be set on only the text, not its background (but we need to use the background property to make this work).

To fix this, you need to override the element’s default display:block settings by adding inline-block instead:

.text-gradient  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; >

Gradient text color!

Sweet! Do you see the difference? Now the red part of the two-color gradient is popping just as much as the orange because they’re applied 50-50.

The gradient color trick is only supported in WebKit browsers. For other browsers use the regular CSS color property as a fallback option and use a color similar to the gradient.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

How to add a gradient overlay to text with CSS

To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style:

Step 1: Add the gradient as a background

In this example we’ll use a linear gradient, which can be drawn this way:

To make the gradient cover the full width and height of your text field, set background-size: 100% , which is what I did in this example.

Step 2: Clipping the background to the text

At this point we have our gradient in the background, and the text is displayed on top of it.

The next thing we want to do is setting background-clip: text . This will only render the background where there’s text. If you test this it will seem like your gradient has disappeared completely, which is because the text is still rendered as well, and the gradient layer is hidden underneath.

That’s why we have to set the text-fill-color to transparent . It will remove the fill from the text, making the gradient visible again.

Step 3: Adding fallbacks

Gradients as background images clipped on top of text isn’t supported by all browsers, so it’s important to add fallbacks. We can do this by adding a background-color property to the text as well.

Also keep in mind that not all gradients are supported equally. For example, in some browsers conic-gradients will not show. In those cases it’s also possible to add a linear-gradient as a fallback to a conic-gradient.

In this example, the text will have a conic-gradient as overlay. If that doesn’t work, it will show the linear-gradient. And in browsers where linear-gradients aren’t supported either, the text will be rendered as the background-color instead.

This also means that if you want to add an actual background to the text, you’ll need to add a wrapper to the text.

 
This text will have a gradient on top 

More examples

Extra: Scalability

If (text) gradients are a big part of your branding, you could split this functionality in two parts: a class that renders your gradient as a regular background-image, and a different class to clip any background to th text.

This allows you to easily do two things:

1. Add the same gradient or pattern to both the text and as a background to regular elements
2. Create different text overlays without having to repeat the clipping properties

Hi! 👋🏻 I’m Sarah, an independent developer, designer and accessibility advocate, located in Oslo, Norway. You might have come across my photorealistic CSS drawings, my work around dataviz accessibility, or EthicalDesign.guide, a directory of learning resources and tools for creating more inclusive products. You can follow me on social media or through my newsletter or RSS feed.

💌 Have a freelance project for me or want to book me for a talk? Contact me through collab@fossheim.io.

If you like my work, consider:

Similar posts

Splitting text into individual characters with React

Wednesday, 18. December 2019

How to style and animate the letters in a string using CSS

Sarah L. Fossheim

Developer & designer, passionate about data, accessibility, tech ethics.

Pick a theme

Made by me with Sanity & Eleventy. Deployed on Netlify.

Источник

CSS Text Gradient

A CSS gradient is a progression of two or more colors, in a specified manner and direction. The series of colors diffuse into each other smoothly at defined angles. Gradients are soothing visuals that provide a pleasant, aesthetic effect to the viewer.

Some powerful CSS attributes, that we will dive into shortly, allow text elements to visually have an apparent gradient font color. Technically, it is implemented as a transparent font color having a gradient background.

The process to create it is the following short and simple series of steps.

Let’s create a simple text element:

We have a simple that we will style to have a text gradient.

Let’s give it a max-width of max-content else the gradient behind the text will stretch to the entire available width, and we will be seeing only that small portion that gets rendered behind our text — unless the text is long enough to cover all the width.

Let’s give it a gradient background:

 background: -webkit-linear-gradient(0deg, #000000 0%, #48abe0 100%); 

Let’s clip the background to only those regions, where there is text. Note that at his stage, our text gradient is already there, but we can’t see it because of the text’s font color:

 background: -webkit-linear-gradient(0deg, #000000 0%, #48abe0 100%); -webkit-background-clip: text; 

Let’s make the color of the text transparent:

 background: -webkit-linear-gradient(0deg, #000000 0%, #48abe0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 

And that’s it, we have our text gradient, or what we may also call Gradient Text.

Except for the Internet Explorer, the background-clip property has good support from the browsers. While background-clip is not officially supported, the -webkit prefixed version has good support. You can see the support statistics here.

Internet Explorer does not support this property at all, so instead of setting the background to linear-gradient and the color to transparent, we can set the background to —webkit-linear-gradient and the -webkit-text-fill-color to transparent. This allows IE to gracefully fall back to just rendering the text.

We can leverage all the powerful gradient configurations provided by CSS to customize our gradients. For example, a radial gradient:

 background: -webkit-radial-gradient( circle, rgba(13, 8, 96, 1) 0%, rgba(9, 9, 121, 1) 21%, rgba(6, 84, 170, 1) 51%, rgba(0, 255, 113, 1) 100% ); 

LINEAR GRADIENT
 
RADIAL GRADIENT
 

body < font-family: sans-serif; >h1 < margin: 0 auto; font-size: 2rem; >h1.linear-gradient < background: -webkit-linear-gradient( 90deg, rgba(13, 8, 96, 1) 0%, rgba(9, 9, 121, 1) 21%, rgba(6, 84, 170, 1) 51%, rgba(0, 255, 113, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; max-width: max-content; >h1.radial-gradient

Conclusion

This is how you can create a text gradient from scratch. For a GUI experience, check out our Text Gradient Generator Tool. It lets you create a text gradient using an intuitive graphical interface and outputs the required design code.

UnusedCSS helps website owners remove their unused CSS every day. Sign Up to see how much you could remove.

You Might Also Be Interested In

Источник