OneTaskBy Tim King · Updated
Image Text Fill
Background-Clip Photo Through Letters, With a Slow Pan and Copyable Code
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Text Fill works
This image text fill generator shows a photograph through the shapes of your letters, so a heading looks cut out of a picture. Paste a link to an image, set the text and size, add a slow pan if you want movement, then copy the HTML and CSS.
Image-filled headings suit travel sites, portfolios and magazine-style hero sections.
How the image text fill works
The text gets the image as its background, then background-clip: text trims that background to
the letter shapes and a transparent text colour lets it show through. Heavy, wide fonts work best,
because thin strokes leave too little room for the picture to read.
Image links and the preview
Paste an https link to see your own picture in the preview. With no link, the preview uses a
colourful gradient in its place and the copied code shows your-image.jpg, ready for you to swap in
your own file path.
FAQ
Is text filled with an image still readable by screen readers?
Yes. The words are real text in the page, so screen readers, search engines and copy and paste all work. Only the paint changes, so check the contrast of the image against the background.
Why is my text invisible in some browsers?
Older browsers need the -webkit-background-clip: text version, which the generated code includes. If the image fails to load the text becomes invisible, so test that the image path is correct.
What does the slow pan do?
It slides the image sideways inside the letters from one edge to the other and back, giving a gentle sense of movement. It turns off for visitors who prefer reduced motion.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Image Reveal On Scroll
Wipe or circle an image into view as it scrolls onto the screen.
Gradient Mask Generator
Fade images to transparent with a linear or radial CSS mask.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.