How to Create Gradient Text in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Gradient text allows you to make your text transition between different colors, giving it a stylish look. You can do this easily using CSS. In this guide, I’ll show you how to apply gradient colors to text in a few simple steps.

Development Steps

Write Basic HTML: Create your HTML with the text you want to style.
Add CSS for Gradient: Apply CSS to make your text show a color gradient.

Step 1: Write Basic HTML

We will first create a basic HTML page and add the text you want to apply the gradient to.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Text</title>
</head>
<body>

    <h1 class="gradient-text">Colorful Gradient Text</h1>

</body>
</html>

Explanation:

<h1>: This is the text we want to style with the gradient. It reads "Colorful Gradient Text."

Step 2: Add CSS for Gradient

Now, we’ll apply CSS to create the gradient effect on the text.

.gradient-text {
    font-size: 48px; /* Makes the text bigger */
    background: linear-gradient(to right, red, yellow); /* Creates a gradient from red to yellow */
    -webkit-background-clip: text; /* Ensures the gradient only affects the text */
    color: transparent; /* Makes the text color itself invisible so the gradient shows */
}

Explanation:

background: linear-gradient(to right, red, yellow);: This creates a gradient that moves from red on the left to yellow on the right.
-webkit-background-clip: text;: Ensures the gradient fills only the text and not the background.
color: transparent;: Makes the text itself invisible so the gradient colors show up instead.

Final Code

Here’s the complete HTML and CSS code to create gradient text:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Text</title>
    <style>
        .gradient-text {
            font-size: 48px;
            background: linear-gradient(to right, red, yellow);
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body>

    <h1 class="gradient-text">Colorful Gradient Text</h1>

</body>
</html>

Output

Conclusion

You now have a simple way to create gradient text in CSS. By following these steps, you can style your text with any color combination you like, making it look unique and colorful. Just change the colors in the linear-gradient to fit your design.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog