How to Create Gradient Text in Webflow: Step by Step Guilde

To create gradient text in Webflow, give your text a class name. Then add a short custom code snippet. Set a linear gradient as the background. Turn on background-clip: text, and make the text fill color transparent. The gradient now shows only inside your letters. This works for any heading or text block, and you can reuse it across your whole site.

Gradient text makes your words look bright and modern. You see it on hero headings, big numbers, and key phrases. Webflow does not have a one-click button for it yet. But you can add it in a few minutes with one small code snippet. This guide shows you two clear methods, an animated version, and ready-to-use color ideas.

We build Webflow sites every day at theCSS Agency. These are the exact steps our team uses on client projects.

What Is Gradient Text?

Gradient text is text that blends two or more colors across its letters. Instead of one flat color, the color shifts from one shade to another. A common example goes from purple to pink across a single word.

The trick uses a colored background behind the text. Then the browser clips that background to the shape of the letters. The rest of the background stays hidden. So you see color inside the letters only. This is why the method is often called background-clip text.

Why Use Gradient Text on Your Webflow Site?

Gradient text draws the eye to what matters most. It adds style without slowing your page. Here is where it works well:

• Hero headings and page titles
• Highlighted words inside a sentence
• Big stats and numbers
• Call to action buttons and labels
• Pricing plan names and feature titles

Use it in small doses. A little gradient text feels premium. Too much looks busy and hurts readability.

Method 1: Create Gradient Text in Webflow With Custom Code

This is the most reliable way. It works in every modern browser. Follow these steps.

Step 1: Add your text

Drag a Heading or Text Block onto your page. Type the words you want to style. Keep it short for the best effect.

Step 2: Give the text a class

Select the element. In the right panel, add a class name. Call it gradient-text. You will reuse this class later, so pick a clear name.

Step 3: Add the code snippet

Drag an Embed element onto the page. You can also paste this into your page settings under custom code. Add this CSS:

<style>
.gradient-text {
  background-image: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>

Step 4: Understand each line

Here is what the code does, in plain words:

• background-image sets the linear gradient. Swap the hex codes for your brand colors.
• 90deg sets the angle. Use 0deg for bottom to top, or 45deg for a diagonal blend.
• background-clip: text clips the color to the letter shapes.
• text-fill-color: transparent hides the normal text color so the gradient shows through.
• The -webkit- lines add support for Safari and older browsers.

Step 5: Publish and check

Click Publish. Open the live site. Your text now shows the gradient. If it looks plain in the Designer, that is normal. The effect often shows only on the published page or in Preview mode.

Method 2: Build the Gradient in the Style Panel, Then Clip It

Prefer to pick colors visually? You can build the webflow gradient background in the UI first. You still need two lines of code for the clip, because Webflow has no clip-to-text toggle.

Step 1: Apply a gradient background

Select your text element. Open the Style panel. Under Backgrounds, click the gradient swatch. Choose a linear gradient. Pick your colors and set the angle you like.

Right now the gradient fills the whole text box. It sits behind the letters, not inside them.

Step 2: Clip the gradient to the text

Add an Embed element with this short code:

<style>
.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

Make sure your text element uses the gradient-text class. Now the gradient shows inside the letters only. This method gives you a visual color picker with almost no code.

How to Make Animated Gradient Text in Webflow

Want the colors to move? An animated gradient text effect adds gentle motion. Use this code instead:

<style>
.gradient-text {
  background-image: linear-gradient(90deg, #7c3aed, #ec4899, #7c3aed);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine 3s linear infinite;
}
@keyframes shine {
  to { background-position: 200% center; }
}
</style>

The background-size makes the gradient wider than the text. The animation slides it across, so the colors appear to shine. Change 3s to make it faster or slower. Keep motion slow and soft so it does not distract readers.

Gradient Text Color Ideas

Not sure which colors to use? Start with one of these pairs. Each set works well for gradient text CSS on headings. Swap the hex codes into the linear-gradient line.

Try three colors for a richer blend. Just add a third hex code inside the gradient, like linear-gradient(90deg, #2563eb, #7c3aed, #ec4899).

How to Reuse Gradient Text Across Your Site

You built the class once. Now use it everywhere. Select any heading or text block. Add the gradient-text class to it. The same gradient applies at once.

This keeps your design consistent. It also saves time. If you change the colors later, edit the code in one place. Every element with the class updates together.

Can You Use Gradient Text on Buttons and Spans?

Yes. The method works on almost any text element.

• Buttons: add the gradient-text class to the button label text.
• Single words: wrap one word in a Text Span, then give the span the class. Only that word gets the gradient.
• Links: apply the class to the link text, not the wrapper.

For a single word inside a heading, the Text Span trick is the cleanest option.

Read More: How to Create a Border Gradient in Webflow

Common Mistakes and How to Fix Them

A few small errors cause most problems. Here are quick fixes.

• Text looks invisible or white. You set the fill color to transparent, but the clip did not apply. Check that the class name matches your code exactly.
• It works in Preview but not on the live site. Publish the site again. Then refresh with a hard reload to clear the cache.
• The gradient fills the box, not the letters. The background-clip: text line is missing. Add it back.
• Colors look off. Check your hex codes and the angle value. Test one change at a time.
• Only one word should be colored, but the whole line changed. Use a Text Span for that word, and move the class onto the span.

Browser Support and Accessibility Tips

Modern browsers support this method well. The -webkit- prefixes cover older versions of Chrome, Safari, and Edge. Keep them in your code for safety.

Accessibility matters too. Follow these rules:

• Keep strong contrast between your gradient font color and the background.
• Use gradient text for short headings, not long paragraphs.
• Avoid pairing light gradients with light backgrounds.
• Test the text on mobile, where screens and lighting vary.

One more benefit. Screen readers still read the words normally, because this is real text, not an image. That also helps SEO, since search engines and AI tools can read and cite the text.

Best Practices for Gradient Text

Use these tips to keep your design clean:

• Stick to two or three colors in each gradient.
• Match the colors to your brand palette.
• Save the gradient-text class and reuse it across the site for a consistent look.
• Apply it to one or two elements per page, not every heading.
• Pair it with a bold font weight so the colors read clearly.

Read More: 10 Best Fonts for Webflow Sites for 2026

Conclusion

Now you know how to create gradient text in Webflow two ways. Method 1 uses one code snippet and works everywhere. Method 2 lets you pick colors in the Style panel, then clip them with two lines. For motion, the animated version adds a soft shine. And the color table gives you a fast starting point.

Start with your hero heading. Test it on the live site. Then reuse the class wherever you want words to pop.

Want a full site that looks this polished? theCSS Agency builds fast, custom Webflow sites for SaaS and B2B brands. Book a call to talk about your project.

FAQs

1. Does Webflow support gradient text without any code?

Not fully. You can build the gradient background in the Style panel. But Webflow has no toggle to clip it to text. You need a short code snippet for that step.

2. Why is my gradient text not showing in Webflow?

Most often the class name does not match your code. Check the spelling. Also publish the site, since the effect may not appear inside the Designer.

3. Can I animate gradient text in Webflow?

Yes. Add a wider background and a simple keyframe animation. The colors then slide across the letters for a shine effect.

4. Is gradient text bad for SEO?

No. The words stay as real, readable text in your code. Search engines and AI tools can read and cite them like normal text.

5. Can I use gradient text on a whole paragraph?

You can, but you should not. Gradient text works best on short headings. Long blocks lower contrast and get harder to read.

6. What does background-clip: text mean?

It tells the browser to show the background only inside the letter shapes. Everything outside the letters stays hidden.

7. How do I add gradient text to just one word?

Wrap that word in a Text Span. Then give the span the gradient-text class. Only that word gets the gradient.

8. Will gradient text work on mobile?

Yes. The method is responsive and works on phones and tablets. Test the contrast on small screens to keep it readable.