CSS Gradient Text Generator
Pick two colors and an angle to create gradient-filled text using CSS background-clip. Free online CSS gradient text generator.
#6366f1
#ec4899
Angle: 90°
Gradient Text
Free CSS Gradient Text Generator
Pick two colors and an angle to create a gradient text effect — the classic technique of clipping a CSS gradient background to text using background-clip: text. Preview it live and copy the finished CSS.
How to Use It
Choose your two gradient colors and adjust the angle slider while watching the live preview update. Copy the generated CSS block and apply it to any text element.
Example
A purple-to-pink gradient at 90° produces a heading that transitions smoothly from left to right, commonly seen on landing page hero titles.
Common Use Cases
- Styling a hero heading or logotype with an eye-catching gradient fill.
- Matching a gradient text effect to a brand's color scheme.
- Adding visual flair to call-to-action headings without images.
FAQs
Does this work in all browsers?
background-clip: text is well supported in modern browsers, though it still commonly needs the -webkit- prefix (included in the generated CSS) for full compatibility, especially in Safari.
Why is my text invisible instead of gradient-filled?
Make sure color: transparent (or the -webkit-text-fill-color: transparentequivalent) is applied alongside the background-clip properties — without it, the solid text color paints over the gradient.
Can I use more than two colors?
Yes — this generator uses two stops for simplicity, but you can manually extend the copiedlinear-gradient(...) value with additional comma-separated color stops.