PocketPlay
中文
CSS Gradient Text
Fill text with a linear, radial or conic gradient using background-clip, tune the colour stops and animation, then copy the CSS or export a transparent PNG.
Gradient
Animation
Preview
CSS
Export PNG
The PNG is drawn on a canvas in your browser, with a transparent background unless you pick a backdrop colour.
How to make gradient text in CSS
- Type your headline, pick a font, weight and size — the preview renders at the real size.
- Build the gradient: choose linear, radial or conic, drag the angle, and add or move colour stops. Turn on the animation if you want the gradient to drift.
- Copy the CSS, or export a transparent PNG when you need the same look somewhere CSS cannot reach (an email, a slide, an app icon).
FAQ
How does gradient text actually work?
The gradient is a background on the element; background-clip: text clips it to the glyph shapes and color: transparent (plus -webkit-text-fill-color: transparent) hides the solid fill so the background shows through.
Is it accessible and SEO-safe?
Yes — the text stays real text, so screen readers and search engines read it normally. Keep enough contrast between the gradient and the page background, and avoid it for long body copy.
Why does my text look invisible in some browsers?
Very old browsers without background-clip: text show transparent text. Add a fallback color before the transparent rules, or wrap the transparent declarations in @supports (background-clip: text) or (-webkit-background-clip: text).