Clip image to text span

Add some variety to your site's copy with text spans and image text fills.

This video features an old UI. Updated version coming soon!
Clone this project

Combine the power of text spans and image text fills to create Headings that stand out — all while still remaining selectable and search engine friendly.

A multi-word Heading shown in black text, features one word with a rainbow colored fill.

In this lesson you'll learn:

  1. How to wrap text with a span
  2. How to add a background image to the text span
  3. How to clip the image background

How to wrap text with a span

To affect specific text within a Heading, add a span to it:

  1. Choose your Heading and double click it to begin editing
  2. Select the word or words you want to add to the span
  3. Select the Wrap with Span "brush" icon in the options above your selection
The "Wrap with span" brush icon button appears after selecting a word in a multi-word Heading.

Great! Now you have a span created in your Heading.

After wrapping one word with a span in a multi-word Heading, the word is a separate "Text span."

Don't forget to add a class to your span to keep your styling organized (e.g., "Image background).

After creating a Text span on a word, give the Text span a class name (e.g., "Image background").

Read more about inline text formatting using text spans.

How to add a background image to the text span

Let's add a background image to the text span — this image will appear within the text:

  1. Open Style panel > Backgrounds
  2. Click the Image and gradient "plus" icon
  3. Click Choose Image to select the image for your text fill
  4. Set the Size to Cover
  5. Click a dot under Position to adjust how your background image is displayed (e.g., select the center dot)

Read more about background images.

In the Backgrounds section of Webflow's Style panel, set the image, set its size to "Cover," and choose its position (e.g., the center dot).
Important: Be sure to check your text span's image color contrast and legibility to ensure the text is accessible with its background. Learn more with our accessibility course.

How to clip the image background

Finally (this is where the magic happens), let's clip the image background to the text span:

  1. Select the text span
  2. Open Style panel > Backgrounds
  3. Choose “Clip background to text” from the Clipping dropdown menu

Read more about gradient and image text fills in the Webflow Designer.

In the Background section of Webflow's Style panel, "Clip background to text" is highlighted in the Clipping dropdown menu.

And that's it! You've created a visually intriguing Heading on your site to wow your site visitors.

A multi-word Heading shown in black text, features one word with a rainbow colored fill.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!