Gradient text. Rainbow, Instagram, hologram.
🌈 Preview

How to use

  1. Type text.
  2. Pick 2 or 3 gradient colors.
  3. Adjust angle (90°=vertical, 0°=horizontal).
  4. Choose font and background.
  5. Optional animation.

Key features

  • 2 or 3-color gradient
  • 0–360° angle
  • 5 presets
  • 4 fonts
  • Animated color-flow option

Use cases

  • Website headlines — Hero section
  • Logo text — modern brand
  • YouTube thumbnails — trendy text
  • Product ads — eye-catcher
  • Instagram stories

How background-clip: text works

CSS magic: set gradient as background, clip to text shape via background-clip:text, set color to transparent. Result: text itself becomes gradient. Supported since Chrome 1+; works in all modern browsers.

FAQ

Image-textured text?

Use a background image + same background-clip technique.

Other scripts?

Yes — works with any font.

Email clients?

Outlook etc. don't support it. Use PNG instead.

Free?

Yes.