Styling Text with Gradients Using Only CSS

While I was learning about background properties in CSS, I came across something fun I hadn’t seen before. Apparently you can use background-clip to create gradient text.

Here’s an example to try it out:

<h2 class="gradient-text">Cupcake ipsum dolor sit amet wafer lemon drops fruitcake.</h2>

.gradient-text {
  background: linear-gradient(to right, #ff80ab, #b388eb);  
  color: transparent;
  background-clip: text;
}

And here’s what it looks like in action:

Previously this would only work in some browsers if you added the -webkit- prefix, but now modern browsers support it out of the box. No prefix needed!

One thing I was initially curious about though.. why not just do this?

color: linear-gradient(...);

Turns out CSS doesn’t let you apply gradients directly to the color property, but if you set the gradient as a background and then clip it to the text, you can still get that effect.

Let me know if you’ve used this before or if you have any other CSS tricks you'd like to share! 😊

Comments

[Jay lee]

that's good