Clip image to text span

Just like on Apple.com, you can create multi-color gradient headings that stand out by combining the power of text spans and image text fills.

Video transcript

</summary>

Just like the example here on Apple’s site, we can clip an image like this to real text (this is real, selectable text).

At any time, we can select text, and wrap it with a Span. And what that lets us do is create a style that only applies to the words I selected (...I’m just creating a class here...). And we’re going to do two things to make this happen.

First, we’ll set a background on our new Class. (We are just choosing an image background, and we can make sure it’s covering the selection...from the center.)

And second? All we have to do is clip the background to the text itself.

And that’s it. Spanned text with a clipped background, perfectly selectable — and since it’s actual text, it’s search engine-friendly.<br>

</details>

Video details

Duration

0:52

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Clip image to text span",
  "description": "As shown on Apple.com, you can create Headings that stand out by combining the power of text spans and image text fills.",
  "url": "https://university.webflow.com/videos/clip-image-to-text-span",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b947d4bdd37d12dce5491a_60e8c2b7d5a3fdc9cd216710_WFU-20TN2.webp",
  "duration": "0:52",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=C4JCkX9haq8",
  "embedUrl": "https://www.youtube.com/embed/C4JCkX9haq8",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}