Add a pop of visual interest to your designs with gradient and image text fills.
Apple uses text fills for a lot of their marketing, and frankly, I’m a fan. So we’ll cover how to do exactly that, but we’ll also show how to put images behind any text.
Let’s do the gradient first. Here’s a heading. Nothing special. And with the heading selected, let’s set a gradient. Of course, we can set two stops, or three, or 15. Doesn’t matter. I can always change this later. And we want to pick the colors we want for each stop, so we can get the look and feel we want for our gradient. Of course, we're choosing three different colors so we can actually see the effect. After that, we can go in and change the angle however we want. Again, we can change this at any time.
Okay, now here’s all I have to do: go in? Under Clipping, we’ll clip the background to the text. That is it.
Second part? What about an image? Same deal here. Here’s some text. With the heading selected, I’ll set a background image. Again, I can always come back to this later, but I’m loading it up and placing the background...just how I want it to look.
And this time? I do, well, the same exact thing. And now the background is clipped to the text.
But wait. Secret third step! What happens if I set a background image...but I set it to fixed? Well, it’s magical. Because a fixed background set to cover will cover the whole viewport. So now if I scroll? The background stays fixed, and the text is basically a cutout (a window into an entire dimension). A dimension...called pink clouds. Dot JPG.
But that’s it. Gradient? Clip the background to text. Image? Clip the background to text. Image fixed to background? Clip the background to text.
hat’s clipping a background to text in the Webflow Designer.
Catch your site visitors’ attention by using background gradients and image text fills to take your Heading game up a notch. Really wow them with a scroll that reveals your background image through your text’s characters.
In this lesson, you’ll learn how to add a text fills to any text in your project doing the following:
Let’s first add a Heading to our page and set its font to something that’s a heavier weight so we can see our text fill within its characters:
Set a gradient on the Heading:
Read more about background gradients.
Note: Safari interprets (and interpolates) gradients to a transparency as “transparent black”. Therefore, the transparent color will look black for Safari users.
Now for the magic — let’s apply the gradient to just the Heading text:
Let’s add another Heading to our page:
Use a Background image for our text fill:
Read more about background images.
We’ll do the exact same thing we did before to clip our gradient to the text:
Let’s make our text act like a cutout — a window — into our background image. As your visitor scrolls down the page, the Heading text reveals portions of the background image behind it.
There you have it - wow your visitors with visually stunning text!
Something went wrong while submitting the form. Please contact support@webflow.com