CSS font gradients
CSS Font Gradient
CSS font gradient is a commonly used technique in web design. By applying a gradient effect to text, it can make the text look more attractive and unique. In this article, I’ll discuss implementing CSS font gradients in detail, including linear, radial, and repeating gradients, and provide code examples and demonstrations.
Linear Gradients
A linear gradient is an effect where the color changes gradually along a straight line. By defining the starting and ending colors, and the direction, you can create a variety of linear gradient effects.
Grammar
.grad-text {
background: linear-gradient(to right, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Sample Effect
Radial Gradient
A radial gradient is an effect where the gradient color spreads outward from the center. By defining the starting and ending colors and the radius of the circular or elliptical gradient, you can create different radial gradient effects.
Syntax
.grad-text {
background: radial-gradient(circle, #f12711, #f5af19);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Sample Effect
Repeating Gradient
A repeating gradient is a gradient effect that repeats multiple times along the text. By setting the gradient repetition mode and spacing, you can achieve different styles of repeated gradient effects.
Grammar
.grad-text {
background: repeating-linear-gradient(-45deg, #00d2ff, #3a7bd5 20px, #3a7bd5 40px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}