Text fills

Add a pop of visual interest to your designs with gradient and image text fills.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

A Heading is filled with gradient color that spans from purple to red to orange by using background Clipping.

In this lesson, you’ll learn how to add a text fills to any text in your project doing the following: 

  1. Gradient text fill 
  2. Image text fill
  3. Fixed image text fill

Gradient text fill

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: 

  1. Open the Add panel
  2. Drag a Heading onto the page
  3. Open Style panel > Typography and set the font (e.g., “Inter 700 - Bold”)

Set a gradient on the Heading:

  1. Select the Heading
  2. Open Style panel > Backgrounds
  3. Click the Image and gradient “plus” icon
  4. Choose Linear gradient as the Type
  5. Set as many gradient stops as you’d like and click the color picker to choose a color for each gradient stop
  6. Adjust the angle of your gradient by clicking and dragging the direction dial dot, pressing the arrows, or typing in your angle degree directly

Read more about background gradients

 Background gradient colors for text are set to span from purple to red to orange. 
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: 

  1. Select the Heading
  2. Open Style panel > Backgrounds
  3. Choose “Clip background to text” from the Clipping dropdown menu
“Clip background to text” is selected under Clipping in the Style panel’s Backgrounds section to clip a gradient to text.
A Heading is filled with gradient color that spans from purple to red to orange by using background Clipping.

Image text fill

Let’s add another Heading to our page:

  1. Open the Add panel
  2. Drag a Heading onto the page
  3. Open Style panel > Typography and set the font (e.g., “Inter 700 - Bold”)

Use a Background image for our text fill: 

  1. Select the Heading
  2. Open Style panel > Backgrounds
  3. Click the Image and gradient “plus” icon
  4. Click “Choose image” to select the image for your text fill
  5. Set the image to Cover
  6. Click a dot under Position to adjust how your image is displayed (e.g., select the lower left dot)

Read more about background images.

A background image of pink clouds is set to Cover a Heading with its image position in the bottom left corner of the Heading it’s affecting. 

We’ll do the exact same thing we did before to clip our gradient to the text: 

  1. Select the Heading
  2. Open Style panel > Backgrounds
  3. Choose “Clip background to text” from the Clipping dropdown menu
“Clip background to text” is selected under Clipping in the Style panel’s Backgrounds section to clip a background image to text.
A Heading is filled with an image of pink clouds by using background Clipping. 

Fixed image text fill

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. 

  1. Select the Heading
  2. Open Style panel > Backgrounds
  3. Choose Fixed to ensure the background covers the entire viewport and remains fixed as you scroll
A background image of pink clouds is set to Fixed under Backgrounds settings in the Style panel. 

There you have it - wow your visitors with visually stunning text!

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?