DEV Community

TateLyman
TateLyman

Posted on

CSS Text Gradient Generator: Rainbow Text in 3 Lines of CSS

Create gradient text effects visually. Pick two colors, set the angle, see the result.

The CSS is just 3 lines:

background: linear-gradient(90deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Enter fullscreen mode Exit fullscreen mode

8 preset gradients. Custom font size. Live preview.

Text Gradient Generator

CSS generators:

Full toolkit: devtools-site-delta.vercel.app

Top comments (0)