CSS Text Gradient
All About EffectsIn this lesson, we will learn how to create text gradient using the CSS liner or radial gradient properties.
Introduction to Text Gradients
Text gradients involve transitioning colors across the text, creating a captivating effect. These gradients can be applied to various elements like headings, paragraphs, or buttons to make your website or application more visually appealing.
The text gradients can be created by using the linear gradient or radial gradient.
Text Gradient using the Linear Gradient
Linear gradients involve a smooth color transition along a straight line. Here's how you can create a linear text gradient in CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Linear Text Gradient Example</title>
<!-- Internal CSS -->
<style>
.text-gradient {
font-size: 50px;
font-weight: bold;
background: linear-gradient(to bottom, yellow, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<span class="text-gradient">Linear Text Gradient<span>
</body>
</html>- linear-gradient(to bottom, yellow, blue) defines the gradient direction and colors.
- background-clip: text clip or cut the background to the shape of the text characters themselves. Not all browsers support background-clip: text, so using vendor prefixes (like -webkit- for WebKit-based browsers) may be necessary for wider compatibility.
- color: transparent ensures the text color is transparent so that the background is clearly visible.
Text Gradient using the Radial Gradient
Radial gradient create a circular color transition. Here's how you can create a radial text gradient in CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Radial Text Gradient Example</title>
<!-- Internal CSS -->
<style>
.text-gradient {
font-size: 50px;
font-weight: bold;
background: radial-gradient(circle, yellow, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<span class="text-gradient">Radial Text Gradient<span>
</body>
</html>Text Background Image
In place of text gradient, you can also use a background image for a text element. See the example below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Background Image Example</title>
<!-- Internal CSS -->
<style>
.text-image {
font-size: 50px;
font-weight: bold;
background-image: url("abstract-image.jpg");
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<img src="abstract-image.jpg" height="150">
<br>
<span class="text-image">Text Background Image<span>
</body>
</html>