Gradient Tutorial

CSS Text Gradient Showcase & Code tutorial

Last update: May 20, 2025 • 8 min read

Gradient

Gradients is a super flexible and fun design technique that isn’t tied to any specific style. You can blend two or even more colors together to create visuals that really catch the eye.

Text is one of the core elements in web design. Figuring out how to make text both beautiful and engaging is something designers are always working on. Adding a gradient effect to text can give it more color depth and texture, making it feel more interesting and lively. Especially when building a brand, text gradients can smartly incorporate brand colors, creating a refined look that keeps the brand style consistent and boosts visual recognition.

I. Text Gradient Design Examples

Below are some text gradient examples I’ve created. You can experience them through CodePen or implement them directly in your projects.

CodePen link: https://codepen.io/ricoui/pen/GggLJzP

See the Pen Text Gradient 001 by ricochan (@ricoui) on CodePen.

II. Outstanding Website Examples:

1. Dimension

<h1 class="text-gradient-dimension01">
Dimension is the new
</h1>
<h1 class="text-gradient-dimension02">
standard for collaboration
</h1>


<style>
.text-gradient-dimension01 {
    background-image: linear-gradient(180deg, rgba(240, 238, 249, .8) 0%, #e2e8ff 100%);
    background-image: linear-gradient(180deg, color(display-p3 .9411764706 .9333333333 .9764705882 / .8) 0%, color(display-p3 .8862745098 .9098039216 1 / 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.text-gradient-dimension02 {
    background-image: linear-gradient(135deg, #9e7aff 0%, #fe8bbb 33.33%, #ffbd7a 66.67%, #f8eac3 100%);
    background-image: linear-gradient(135deg, color(display-p3 .6196078431 .4784313725 1 / 1) 0%, color(display-p3 .9960784314 .5450980392 .7333333333 / 1) 33.33%, color(display-p3 1 .7411764706 .4784313725 / 1) 66.67%, color(display-p3 .9725490196 .9176470588 .7647058824 / 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
</style>

2. Supastellar

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

<style>
.text-gradient-supastellar {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #6549e9, #c8a6eb);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}
</style>

III. Implementing CSS Text Gradients in Web Design

As both a designer and developer, I believe understanding the principles behind visual effects is crucial. Here’s how to implement text gradients with CSS—simple to use yet visually impactful.

Pure CSS of Text Gradient Effects

To add gradient effects to text elements, we need to set three key CSS properties: background-image, background-clip, and text-fill-color. Here’s a detailed explanation of each property and how to use them:

1. `background-image: <gradient>`

This property defines a background image for an element. For text gradient effects, we typically use gradient functions (like linear-gradient) to create a gradient background. The linear-gradient function allows you to specify the direction, colors, and color transition ranges.

Basic usage: linear-gradient(direction, color1, color2, ...) For example, linear-gradient(to right, #ff6b6b, #4ecdc4) creates a gradient from left to right, transitioning from red (#ff6b6b) to teal (#4ecdc4).
Direction parameters: Direction can be to right (left to right), to bottom (top to bottom), to top right (bottom left to top right), or expressed as an angle like 45deg (45 degrees).
Color parameters: Multiple color values are supported for smooth transitions. For example, linear-gradient(to right, #ff6b6b, #feca57, #4ecdc4) transitions from red to yellow to teal. You can also specify color stop positions, like linear-gradient(to right, #ff6b6b 30%, #4ecdc4 70%), to control the gradient transition range.
Other gradient types: Besides linear-gradient, you can use radial-gradient to create radial gradients (spreading from the center outward), such as radial-gradient(circle, #ff6b6b, #4ecdc4), which is ideal for circular gradient effects on text.

2. `background-clip: text`

background-clip literally means “background clipping” and controls which area of an element the background effect applies to. For text gradient effects, setting it to text restricts the background (our gradient) to the shape of the text, so only the text area displays the background effect, while areas outside the text remain unaffected.

Basic usage: background-clip: text This clips the background to the text shape, with no background showing outside the text.
Compatibility prefix: Since some older browsers (like Safari and some Android browsers) don’t fully support this property, it’s recommended to add vendor prefixes like -webkit-background-clip: text to improve compatibility.
Extended knowledge: Other property values background-clip isn’t limited to text; it also has these common values:
- background-clip: border-box: Background applies to the entire border area (including borders, padding, and content areas).
- background-clip: padding-box: Background applies to the padding area (including padding and content areas, excluding borders)—this is the default value in most browsers.
- background-clip: content-box: Background applies only to the content area (excluding borders and padding). These property values can control the display range of background images or colors, but for text gradients, we only use the text value.
Application scenarios: background-clip: text is the core property for implementing text gradients, suitable for any scenario where background effects need to be limited to text shapes, such as headings, logos, or decorative text.

3. `text-fill-color: transparent`

This property sets the fill color of text. For text gradient effects, setting it to transparent makes the text’s fill color disappear, revealing the gradient background. Without this property, the text would display in its default color (usually black), covering the gradient background.

Basic usage: text-fill-color: transparent Makes the text fill color transparent, revealing the background gradient.
Compatibility prefix: Similar to background-clip, some browsers may require vendor prefixes like -webkit-text-fill-color: transparent to ensure compatibility.
Extended knowledge: Other uses text-fill-color isn’t limited to transparent; it can be set to any color value (like #fff or rgb(255, 255, 255)) to control the text fill color. However, for text gradient effects, it must be set to transparent to reveal the background gradient.
Note: If a browser doesn’t support text-fill-color or background-clip: text, provide a fallback color (like color: #ff6b6b) to ensure text remains visible in unsupported environments.
Application scenarios: This property is the final step in implementing text gradient effects, suitable for any design that requires “hollowing out” the text fill color to display background effects.**

Advanced Technique: Animated Gradients

To make gradient effects more dynamic, you can animate the gradient background using CSS animations:

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

<style>
  .gradient-text-animated {
    font-size: 48px;
    font-weight: bold;
    background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    animation: gradient 5s ease infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>

This dynamic gradient effect is perfect for attracting user attention to titles or focal elements.

Browser Compatibility

Current browser compatibility for CSS text gradient-related properties is as follows:

background-image: linear-gradient Supported by almost all modern browsers (including Chrome, Firefox, Safari, Edge), IE 10+ also supports it, but IE 9 and below do not.
background-clip: text Requires the -webkit- prefix for support in some older browsers (like Safari and some Android browsers). Currently supported by Chrome 4+, Firefox 49+, Safari 5.1+, Edge 12+; not supported by IE browsers.
text-fill-color: transparent Also requires the -webkit- prefix for better compatibility. Support is similar to background-clip: text; not supported by IE browsers.

Compatibility Summary Table

Property/Feature	Chrome	Firefox	Safari	Edge	IE
`background-image: linear-gradient()`	26+	16+	6.1+	12+	10+
`background-clip: text`	4+	49+	5.1+	12+	Not supported
`text-fill-color: transparent`	4+	49+	5.1+	12+	Not supported

Compatibility Handling Recommendations

For browsers that don’t support these properties (like IE), set a solid color text as a fallback:

.gradient-text {
  color: #ff6b6b; /* Fallback color */
  background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

This ensures that even if a browser doesn’t support gradient effects, there’s a backup plan to maintain text readability for users.

Conclusion

Text gradients are one of my most frequently used effects in current web design, combining creativity with practicality. Through simple CSS implementation, they add unlimited possibilities to web typography. As a designer, I recommend boldly experimenting with gradient effects in your designs, integrating them with your brand style or project requirements to create enhanced visual experiences. Of course, always be mindful of compatibility issues—test thoroughly to ensure perfect visual rendering across different devices and browsers.