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.

Источник

How to Create Text Gradient in CSS?

In this article, we are going to learn about text gradient CSS, so before getting started with the topic, let us get a short overview of what is text gradient in CSS.

Text gradients in CSS: A text gradient in CSS is a type of linear gradient for text styling in which the text is filled with colour. The text is coloured with a continuation from the start point to the endpoint. So, this type of transition in colour, from one to another colour, is done with help of the text gradient.

So let us now begin with the main agenda of our article, text gradient CSS.

Pre-requisites

Before learning about the text gradient in CSS, we must have a good understanding of the gradients and linear gradients in CSS. So, let us discuss them in detail too.

Gradients: A gradient in CSS is a continuation of colours with a starting and ending point, the gradual transition of colours from one colour (like red) to another colour (like blue), is a linear gradient. The perfect example of the linear gradient will be a sunset, we can observe how there is a transition of colours of the sunset from one colour to another beautifully and seamlessly.

When we are using these gradients in CSS for designing the text of any website or app we call it text gradient CSS. The text gradient is similar to a gradient, but just in the text gradient case, instead of filling a background, we use these gradient effects for text. However, we should never use text gradients in CSS for longer texts. Instead, we should use them to make headings or specific words more eye-catching. If you want to learn more about the gradient you can refer to Gradient.

Why Text Gradients Matter:

Now, there are several reasons why coders and web developers use gradient text most of the time gradients are one of the latest crazes in website design for a few reasons:

• The text gradient CSS is very easy to implement, that is, once you know what effects you can use to make the text look very attractive, it will be a cake work for you.
• The text gradients CSS have wonderful visual effects (especially, in the case of dark-theme websites or apps).
• It is a very useful tool for our website if we know how to create a text gradient effect with our text (whether muted text gradients or bright and highly colourful).

Syntax

The most important part of your text gradient CSS is the actual CSS syntax itself. Check out the basic form of the CSS syntax.

Explanation:

We are using the linear gradient method to create a gradient background and then we are using the WebKit properties to overlay that background with our text.

Let us understand this syntax with the example below.

Explanation:

Let us understand the above example code :

• In the above code, there is a heading tag ( ) inside the body tag ( ), to which we are going to add the text gradient effect.
• In the head block, we have applied the Internal or Embedded CSS.
• In which we have done the styling of the body tag , which includes basic background styling.
• Then we have done some basic styling for the heading tag ( ), which includes font-size .
• Then we applied the linear-gradient effect to the heading tag ( ), with the colour rgb(188, 12, 241) to rgb(212, 4, 4)`. You can use any colour of your choice.
• Then we applied the WebKit properties, the first property -webkit-background-clip: text; will turn the whole gradient-background transparent, and the second property -webkit-text-fill-color: transparent; will fill the heading tag ( ) text with the gradient background.

What You Will Need to Know

To construct your text gradient syntax, you must first break down the basics. Let us learn about some of the keywords that would help in building the basics of what you will need to create your text gradient :

Font Size

This one is self-explanatory. Before setting up the other gradient properties, you will need to set up the font size of the text, that is, how large you would like your text font to be. The font size unit in CSS is based on EMS, pixels, points, and percentages. You might required to look up the conversions, but usually you can expect 1em = 12pt = 16px = 100% .

Let us look at an example for font size, for more clarity and better understanding.

Direction

The text gradient CSS is not much different from the linear gradient, especially in the case of direction. We define the angle of a linear gradient in the code in form of a keyword or number and unit. There are varieties of keywords like to the top, to bottom, to left, and to right which we can use with the linear gradient to decide the direction of the line from the starting point. We can combine these directional keywords, for instance — to the top right or to the bottom left (usually to create a diagonal line). The number and unit pairings can also be used to decide the angle and direction of the line.

Let us look at an example for direction, for more clarity and better understanding.

Colors and Color Stops

We will need at least two colours for the gradient to transition between to create the simplest sort of text gradients in CSS. In essence, the colour stops refer to the code point along the text gradient where each colour should end. These hues can have any basis, including name, HEX , RGB , or HSL . As a result, there are numerous alternatives for how your gradient can be shown.

Let us look at an example for Colors and Color Stops, for more clarity and better understanding.

How to Create Text Gradient in CSS?

Let us now see how we can create text gradients in CSS step by step.

HTML Code

In the following section, the text used for the text gradient CSS demonstration is wrapped inside the heading tag h1 tag. Let us look at the code for it.

CSS Code

For CSS code, we need to follow the given steps below :

• Step 1: Inside the CSS code we will first apply some basic background to the body and align the text to the centre of the page.

Output:

• Step 2: Then we will do some basic styling of the heading tag ( ), like adjusting the font size and family, etc.

• Step 3: Then we will apply the linear gradient property on the heading tag text with any colours of your choice.

Output:

• Step 4: Then with the help of WebKit properties, we will make the entire gradient background transparent, and then we will fill the text with a gradient background.

Complete Code: Let us look at the complete code by combining both the above sections of code.

Example

Now let us look at an example of text gradients CSS, for better understanding.

Explanation:

Let us understand the above code in detail:

• Firstly, inside the HTML code, there is a heading tag ( ) with the class name as rainbow-text , inside the body tag ( ), to which we are going to add the text gradient effect.
• Then we are applying the external CSS, to this HTML code.
• Inside the CSS code, at first we have done the general styling of the page, such as setting the background colour, font size, etc.
• Then we styled the heading tag of the HTML code, by calling its class name rainbow-text .
• In which we have styled the text with the conic gradient, with double percentage to avoid blur. The conic gradient is also similar to the linear gradient, just in the case of the conic gradient the colour transitions rotated around a centre point.
• Then. we have set the background size and repeat properties.
• Then with the help of WebKit properties, we will make the entire gradient background transparent, and then we will fill the text with a gradient background.
• Then we have also added animation to the text when loading the element. This animation property animates the text on page load and when hovering out.
• We have also added animation on hover.
• Then we have also added the effect of moving the background and making it larger. The animation showed when hovering over the text.
• Also, moving the background and making it smaller. The animation showed when entering the page and after the hover animation.

Conclusion

In this article, we learned about text gradient CSS. Let us recap the points we discussed throughout the article:

• A text gradient in CSS is a type of linear gradient for text styling in which the text is filled with colour.
• Before learning about the text gradient in CSS, we must have a good understanding of the gradients and linear gradients in CSS.
• A gradient in CSS is a continuation of colours with a starting and ending point, the gradual transition of colours from one colour (like red) to another colour (like blue), is a linear gradient.
• The text gradient is similar to gradient, but just in the text gradient case, instead of filling a background, we use these gradient effects for text.
• The text gradient CSS is very easy to implement.
• We have seen the syntax of text gradient CSS.
• To construct your text gradient syntax, you must have a good knowledge of the Font Size, Direction, Colors, and Color Stops.
• Then we have seen how we can create text gradient step by step. Also, we have seen an example of using conical gradient for text styling, which includes animation while hovering and page reloading.

Источник