CssHow-ToBeginner · 3 min read

How to Create Gradient Text in CSS: Simple Steps

To create gradient text in CSS, apply a linear-gradient as the background, then use background-clip: text and -webkit-text-fill-color: transparent to show the gradient inside the text. This technique makes the text appear as if it is filled with a smooth color gradient.

📐

Syntax

Use the following CSS properties to create gradient text:

background: linear-gradient(direction, color1, color2, ...); sets the gradient colors and direction.
-webkit-background-clip: text; clips the background to the text shape (required for most browsers).
-webkit-text-fill-color: transparent; makes the text color transparent so the background gradient shows through.

css

selector {
  background: linear-gradient(to right, red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

💻

Example

This example shows how to apply a horizontal rainbow gradient to a heading text.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Text Example</title>
<style>
h1 {
  font-size: 4rem;
  font-weight: bold;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* For Firefox */
  background-clip: text;
  color: transparent;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #222;
}
</style>
</head>
<body>
  <h1>Gradient Text</h1>
</body>
</html>

Output

A large heading in the center of the page with text colored in a smooth horizontal rainbow gradient on a dark background.

⚠️

Common Pitfalls

Common mistakes when creating gradient text include:

Not using -webkit-background-clip: text, which is needed for most browsers to clip the gradient to the text.
Forgetting to set -webkit-text-fill-color: transparent or color: transparent, so the gradient does not show through.
Using background-clip: text without the -webkit- prefix, which may not work in all browsers.
Applying gradient directly to color property, which is not supported.

css

/* Wrong way: gradient on color property (does not work) */
h1 {
  color: linear-gradient(to right, red, blue);
}

/* Right way: gradient on background with clipping */
h1 {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

📊

Quick Reference

Summary tips for gradient text in CSS:

Use linear-gradient or other gradient functions for background.
Always include -webkit-background-clip: text for browser support.
Set text fill color to transparent with -webkit-text-fill-color: transparent.
Test in multiple browsers to ensure compatibility.

✅

Key Takeaways

Apply a gradient background and clip it to the text using -webkit-background-clip: text.

Make the text color transparent with -webkit-text-fill-color: transparent to reveal the gradient.

Gradient cannot be applied directly to the color property of text.

Include vendor prefixes for better browser support.

Test your gradient text on different browsers to ensure it looks correct.