How to apply a background gradient or image to your text (CSS & Webflow)

If you’re anything like me, you appreciate minimal designs. That’ll often mean you don’t have a lot of content on display at once, lots of breathing room and a limited colour palette.

However, sometimes you need to add a little flair.

One of the most elegant ways to do this — in my opinion — is to decorate some important text (typically a portion of a headline) with a gradient or image.

Some of the best designers use this trick to add the cherry on top of their great interfaces. Take Apple for instance, this is a really common UI pattern for them:

As a regular user of code and no-code tools, I wanted to share how you can achieve this effect in both plain CSS code and Webflow.

How to give text a background gradient in CSS

There are five things we need to do:

1. Wrap the text we want to impact in a span tag (if you don’t want all the text to have this effect)
2. Give the span tag a class (.decorated-text)
3. Give the .decorated-text class a background gradient
4. Clip the background so it only shows on the text
5. Make the colour of the text transparent so that the background is visible

Here’s a simple codepen with all of those steps covered:

Included in that example are some webkit properties which make the effect behave more consistently across browsers.

Using a background image instead of a gradient in CSS

In order to use a background image rather than a gradient, the steps are very similar to the ones above. The only difference is we give the .decorated-text class a…