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.
About the author
