๐ŸŒˆ CSS Gradient Text Generator

Updated: 2026-07-24
60px
90ยฐ
๐ŸŽจ Preset Gradients
Gradient Text

๐Ÿ“‹ CSS Code

background: linear-gradient(90deg, #06b6d4, #8b5cf6, #ec4899);\n-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\nbackground-clip: text;

๐Ÿ“– Usage Guide

โ“ FAQ

Is the generated CSS compatible with all browsers?

Yes. It works in all modern browsers (Chrome, Firefox, Safari, Edge) including mobile.

How do I use gradient text on my website?

Simply copy the generated CSS code and paste it into your CSS file. It requires 3 lines working together.

Can I use only two colors?

Yes! Just set the start and end colors. The middle color is optional.

CSS Gradient Text Generator | No Registration ยท Always Free

Feedback: dexshuang@google.com