CSS Gradient Text Generator

Create gradient text effects with CSS. Choose colors, angle, and gradient type. Live preview with copy-ready CSS code.

Presets

Text

Sample text

Font size72px

Gradient

Type

Angle90°

Color stops

#ec48990%

#a855f750%

#3b82f6100%

Preview

Gradient Text

CSS Output

background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;

How to Use CSS Gradient Text Generator

1Enter your text and adjust font size.
2Choose gradient type (linear or radial) and angle.
3Add color stops and adjust positions.
4Copy the generated CSS for your project.

Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.

CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.

CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

How does gradient text work in CSS?▾

CSS gradient text uses three properties together: set background to a gradient value (e.g. linear-gradient()), then apply -webkit-background-clip: text and background-clip: text to clip the background to the text shape, then set -webkit-text-fill-color: transparent and color: transparent so only the clipped gradient shows through. The text itself becomes a mask over the gradient background. This is a purely visual technique — the DOM text remains selectable and accessible.

Which browsers support background-clip: text?▾

The -webkit- prefixed version (-webkit-background-clip: text) has been supported since Chrome 4, Safari 4, Edge 15, and Opera 15. The unprefixed background-clip: text was added to the CSS specification later and is now supported in Chrome 120+, Firefox 122+, Safari 14+, and Edge 120+. Including both the prefixed and unprefixed versions ensures the widest compatibility. Internet Explorer does not support this technique.

What does background-clip: text do?▾

background-clip determines how far the element background extends. The default value is border-box (background fills the full element box). The text value clips the background to the foreground text glyphs only — the background is only visible through the letterforms. Combined with a transparent text color, the gradient shows through exactly where the characters are. Without setting the text color to transparent, the gradient would be hidden behind the solid text color.

How do I animate gradient text?▾

Animate the background-position on a larger background-size to create a moving gradient effect. Set background-size: 200% 200% (or larger), then use a @keyframes rule to shift background-position from 0% 0% to 100% 100%. Example: @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }. Apply with animation: gradientShift 3s ease infinite. This avoids re-rendering the gradient on every frame.

Are there accessibility concerns with gradient text?▾

Gradient text can reduce legibility because contrast varies across the text. WCAG 2.1 requires a 4.5:1 contrast ratio for normal text against the background — with gradient text, contrast changes at every pixel, making it hard to guarantee compliance. To improve accessibility: ensure the darkest part of the gradient still meets contrast requirements, avoid using gradient text for long passages of body text, prefer it for headings and display text only, and always provide a fallback color property so browsers that do not support background-clip: text show a solid, high-contrast color. Screen readers read the underlying text content normally, unaffected by the visual styling.

Image Tools