Styling Text with Gradients Using Only CSS

Elaine Sajets — Thu, 17 Apr 2025 03:49:27 +0000

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! 😊

Did you know Google Fonts might not be GDPR-compliant?

Elaine Sajets — Mon, 14 Apr 2025 08:37:52 +0000

Loading fonts straight from Google’s servers (via CDN) sends the user’s IP address to Google — which counts as personal data under GDPR. That means that if your website targets users in the EU/EEA, you might actually need a cookie banner just for fonts 😆

The nice thing is, even if you are concerned about GDPR, you can still use Google Fonts without the cookie banner, as long as you self-host the fonts. Instead of linking them in your HTML, you can download the fonts and include them with @font-face in your CSS.

I only learned about this recently while reading about fonts, so just tossing it out there in case it helps other beginners like me.

Anyone have other tips or thoughts for beginners — either around web dev and regional privacy laws, or just general best practices? Always curious to hear what more experienced devs wish they’d known early on 👀

DEV Community: Elaine Sajets

Styling Text with Gradients Using Only CSS

Did you know Google Fonts might not be GDPR-compliant?