How to Add a Gradient Overlay to Text with CSS?
Last Updated :
26 Mar, 2024
Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text.
Gradient Overlay to Text using background-clip Property
The background-clip property with the value text allows you to clip the background to the text, making it possible to apply a gradient overlay directly to the text.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Gradient Overlay to Text with CSS?
</title>
<style>
.gradient-text {
font-size: 40px;
font-weight: bold;
background: linear-gradient(45deg, #d1d1d1, #024e0e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-align: center;
}
</style>
</head>
<body>
<div class="gradient-text">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Output:
Explanation:
- background Property: Specifies the linear gradient to be used as the background of the text.
- -webkit-background-clip: text; and background-clip: text;: These properties clip the background to the text. The -webkit- prefix is used for WebKit-based browsers like Chrome and Safari.
- color: transparent;: Makes the text color transparent, allowing the background gradient to show through.
Gradient Overlay to Text using a Mask
For browsers that don’t support background-clip: text, you can use a mask to achieve a similar effect.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Gradient Overlay to Text with CSS?
</title>
<style>
.gradient-text {
font-size: 40px;
font-weight: bold;
background: linear-gradient(45deg, #d1d1d1, #024e0e);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
}
</style>
</head>
<body>
<div class="gradient-text">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Output:
Explanation:
- -webkit-text-fill-color: transparent;: Makes the text color transparent. This property is specific to WebKit-based browsers.
- -webkit-background-clip: text;: Clips the background to the text. This property is also specific to WebKit-based browsers.
Gradient Overlay to Text using SVG
You can also use Scalable Vector Graphics (SVG) to create a gradient overlay for text. This approach is more compatible with different browsers.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Gradient Overlay to Text with CSS?
</title>
<style>
.gradient-text-svg {
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<svg width="100%" height="60">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#d1d1d1; stop-opacity:1" />
<stop offset="100%" style="stop-color:#024e0e; stop-opacity:1" />
</linearGradient>
</defs>
<text x="0" y="40" fill="url(#gradient)" class="gradient-text-svg">
Welcome to GeeksforGeeks
</text>
</svg>
</body>
</html>
Output:
Explanation:
- <linearGradient> Element: Defines a linear gradient that can be used as a fill for the text.
- <stop> Elements: Define the colors and positions for the gradient.
- fill=”url(#gradient)”: Applies the gradient to the text.
Share your thoughts in the comments
Please Login to comment...