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.
<!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 w3wiki
</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.
How to Add a Gradient Overlay to Text with CSS?
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.
Table of Content
- Approach 1: Using background-clip
- Approach 2: Using a Mask
- Approach 3: Using SVG