How to Make Text Gradient in CSS

Learn to create stunning gradient text effects using CSS background-clip. Step-by-step tutorial with live interactive demos.

What is CSS Text Gradient?

CSS text gradient is a technique that fills text with a gradient color blend instead of a solid color. It creates eye-catching typography using:

background-clip: text - Clips the gradient to the text shape
Transparent text color - Allows gradient to show through
Linear or radial gradients - Multiple gradient types supported
Animation ready - Can be animated for dynamic effects

Popular on landing pages, hero sections, and modern web designs to create visually striking headlines.

Gradient Text

Step-by-Step Tutorial

Follow these 5 simple steps to create gradient text. Click any code block to copy.

Create a Text Element

Start with any text element - headings work best since gradient effects are more visible on larger text.

Apply a Gradient Background

Add a linear-gradient (or radial-gradient) as the background. Choose colors that blend well together.

Clip Background to Text Shape

The magic happens here! background-clip: text clips the gradient to the text shape. Include the -webkit- prefix for Safari.

Make Text Transparent

Set color: transparent so the gradient shows through. Without this, the text color will cover the gradient.

Add Display Property

Add display: inline-block to ensure the gradient applies correctly. This prevents the background from extending beyond the text.

Live Interactive Demo

Customize your gradient text and copy the generated CSS.

Gradient Text

Start Color

End Color

Gradient Angle90deg

Generated CSS

.gradient-text {
  background: linear-gradient(90deg, #667eea, #f093fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

Linear Gradient Text Examples

Popular linear gradient combinations for text. Click any example to try it in the demo above.

Radial Gradient Text Examples

Radial gradients create a circular color blend, perfect for unique text effects.

Cosmic

radial-gradient(circle, #667eea, #764ba2, #f093fb)

Sunrise

radial-gradient(circle, #ffecd2, #fcb69f)

Northern Lights

radial-gradient(ellipse, #00c6ff, #0072ff, #7c3aed)

Golden Hour

radial-gradient(circle, #f093fb, #f5576c, #f093fb)

Animated Gradient Text

Create eye-catching animated gradient text using CSS animations.

Animated Text

CSS Code

/* Animated Gradient Text */
.animated-gradient-text {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #ff6b6b
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Tailwind CSS Text Gradient

Create gradient text easily with Tailwind CSS utility classes.

Gradient Text

from-purple-500 via-pink-500 to-red-500

Diagonal Gradient

bg-gradient-to-br from-green-400 to-blue-500

Multi-color

from-indigo-500 via-purple-500 to-pink-500

Tailwind Code

<!-- Tailwind CSS Text Gradient -->
<h1 class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 bg-clip-text text-transparent">
  Gradient Text
</h1>

<!-- Different directions -->
<p class="bg-gradient-to-br from-green-400 to-blue-500 bg-clip-text text-transparent">
  Diagonal Gradient
</p>

<!-- Three color stops -->
<p class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
  Multi-color Gradient
</p>

Browser Support

background-clip: text Browser Support

Text gradient using background-clip: text has excellent browser support:

Chrome

Firefox

49+

Safari

5+ (prefix)

Edge

15+

Opera

15+

Always include -webkit-background-clip: text for Safari and older Chrome versions. Global browser support is over 97%.

Frequently Asked Questions

How do I make text gradient in CSS?

To create gradient text in CSS, apply a gradient background to your text element, then use background-clip: text (with -webkit-background-clip: text for Safari) and set the text color to transparent. This clips the gradient to the shape of the text, creating the gradient text effect.

Why is background-clip: text not working?

The most common issues are: 1) Missing the -webkit- prefix for Safari/Chrome compatibility, 2) Not setting color: transparent so the gradient shows through, 3) The element needs display: inline-block or block for the background to apply properly. Make sure you have all three: background-clip: text, -webkit-background-clip: text, and color: transparent.

Can I animate gradient text in CSS?

Yes! You can animate gradient text by using a larger background-size (like 200% or 300%) and animating the background-position property. This creates a smooth moving gradient effect. You can also animate using CSS @keyframes for more complex animations like color-shifting gradients.

How do I create gradient text in Tailwind CSS?

In Tailwind CSS, use the classes: bg-gradient-to-r (or other directions), from-[color], to-[color], bg-clip-text, and text-transparent. For example: className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"

Does gradient text work in all browsers?

Yes, gradient text works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The -webkit-background-clip: text property is needed for Safari and older Chrome versions. The effect has excellent browser support as of 2024/2025 with over 97% global coverage.

Create gradient text from any website

Frontend Hero's CSS Scanner lets you extract text gradients and all CSS styles from any website in 2 clicks. See how top sites create their gradient typography.

Get Frontend Hero now →

Try the gradient generator →

How to Make Text Gradient in CSS

What is CSS Text Gradient?

Gradient Text

Step-by-Step Tutorial

Create a Text Element

Apply a Gradient Background

Clip Background to Text Shape

Make Text Transparent

Add Display Property

Live Interactive Demo

Gradient Text

Linear Gradient Text Examples

Sunset

Ocean

Purple Dream

Emerald

Fire

Cool Blues

Radial Gradient Text Examples

Cosmic

Sunrise

Northern Lights

Golden Hour

Animated Gradient Text

Animated Text

CSS Code

Tailwind CSS Text Gradient

Gradient Text

Diagonal Gradient

Multi-color

Tailwind Code

Browser Support

background-clip: text Browser Support

Frequently Asked Questions

More CSS Tutorials

Copy CSS from Website

Center a Div (CSS)

Center a Div (Tailwind)

Convert CSS to Tailwind

Glassmorphism Effect

Neumorphism Button

Responsive Navbar

Sticky Header

CSS Pagination

CSS Accordion

Dropdown Menu

CSS Modal

Toast Notifications

Hamburger Menu

Animate Gradients

Skeleton Loader

Element Screenshot

Pick Color from Website

Identify Fonts

Download All Images

Measure Elements

Extract Colors from Website

Dark Mode Toggle

Responsive Grid

Center Text in CSS

Make Text Bold

Add Shadow in CSS

Round Corners in CSS

Style File Input

Create gradient text from any website