DEV Community

Cover image for Beautify Your Text With CSS Gradients!
Pranshu Jha
Pranshu Jha

Posted on • Edited on • Originally published at pranshujha.hashnode.dev

3 1

Beautify Your Text With CSS Gradients!

Here's how to add a gradient to your text to create something like 👇

image.png

Although CSS lets you do all sorts of amazing things, unfortunately for some reason you can't just do

color: linear-gradient(#67b26f, #4ca2cd);
Enter fullscreen mode Exit fullscreen mode

To set gradient as the text color

But fret not! There's a small workaround that we can use.

Here's how -

  • Add the gradient as a background
  • Add a background clip with value as text
  • Set the color to transparent And you're done!

Here's the codepen:

Thanks for reading and Happy Hacking!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay