How to Apply a Gradient Effect to Text with CSS

I will be taking us through some ways we can add gradient effect to text. This tutorial also assumes that you have an understanding of CSS and its properties like background, and background-color.

Creating Gradient Effects

Before we start creating gradient effect, let's understand a few concepts.

What is gradient?

Gradients let you display smooth transitions between two or more specified colors.

You can read more about Gradient here.

Linear Gradient

Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose.

Below, you will find a code example.

You can read more about Linear Gradient.

Radial Gradient

Radial gradients differ from linear ones in that they start at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn’t always straight. So they can be useful to make a gradient seem even more natural.

Below you will find a code example: You can read more about Radial Gradient.

Code

We will be exploring various ways we can add gradients to text, but lets look at the CSS properties that can help us achieve this.

• background
• -webkit-background-clip
• -webkit-text-fill-color

Background

The CSS background properties are used to add background effects for elements. More on CSS background.

-webkit-background-clip

The background-clip property defines how far the background (color or image) should extend within an element. More on CSS background clip.

-webkit-text-fill-color

The text-fill-color property specifies the fill color of characters of the text. If this property is not specified, the value of the color property is used. The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values. More on CSS Text fill color.

Full Gradient

What we mean here is applying gradient effect on the entire text. In our code sample we used both radial and linear gradient.

Partial Gradient

What we mean here is applying gradient effect to some part of the text. In our code sample, we used both radial and linear gradient.

There are various ways to go about this depending on what you wish to achieve.

First Concept

This concept involves us first applying the gradient to the entire text, then targeting the part on the text we dont wnat the gradient to affect by wrapping that part of the text with any tag of your choice. But in our case, we used span tag.

.partial-linear-one {
  background: linear-gradient(90deg, #b2ff42 0%, #0d8773 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.partial-one > span {
  background: #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Second Concept

This concept involves us giving the entire text a color using the css color property, and then giving the part of the text, we want to apply the gradient effect by wrapping the part of the text with any tag of your choice. But in our case, we used span tag.

.partial-two {
  color: #FFFFFF;
}

.partial-linear-two > span {
  background: linear-gradient(90deg, #b2ff42 0%, #0d8773 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

The code snipet below shows the examples in full and can be practiced with

Source Code

If you have any issue at all, here is a link to the git repository Text gradient effect.