How to create image-filled text in Squarespace with SquareKicker Text Fill
Create typography that becomes part of the design
Typography doesn’t always have to sit on top of your design. Sometimes it can become the design itself.
If you’re looking for a way to create more distinctive headings, hero sections, or editorial-style layouts, SquareKicker’s Text Fill tool lets you fill text with images, apply gradients, and even animate color transitions, all within the Squarespace workflow.
In this tutorial, Hannah walks through the complete Text Fill workflow, from selecting an image to creating animated gradient effects and applying the technique across different types of text.
Start by filling your text with an image
The Text Fill tool makes it easy to replace a solid text color with an image from your Squarespace asset library.
Once you’ve selected the text you want to customize, simply choose Image as the fill type and select the asset you’d like to use. If the image isn’t already in your asset library, you can quickly upload it before applying it to your design.
This creates an immediate visual effect that works especially well for large headings, display text, and feature sections.
Position the image for the best result
Not every image works perfectly the moment it’s applied to text.
Text Fill includes focal point controls so you can reposition the image and decide exactly which part is visible inside your lettering.
If you’ve used SquareKicker’s Stencils tool before, this workflow will feel familiar, making it easy to fine-tune the composition without editing the original image.
Add gradients for more creative control
Once your image is in place, you can layer gradients over the top to create a completely different look.
Choose separate colors for the top and bottom of the gradient, or introduce transparency to allow more of the image to show through. You can even build gradients using colors from your Squarespace palette and adjust their transparency to achieve a softer result.
The gradient direction can also be adjusted, giving you another way to shape the final appearance of your typography.
Bring your text to life with animated gradients
One of the most eye-catching parts of the tutorial is the animated gradient effect.
Rather than remaining static, the gradient can move across the image, creating subtle motion inside the text itself.
The animation settings let you adjust:
Animation speed
Wavelength, which controls how broad or concentrated the color transitions appear
Small adjustments to these settings can completely change the feel of the animation, from smooth color movement to tighter, more dynamic transitions.
It’s not just for photos
The tutorial also shows that Text Fill isn’t limited to static images.
Because GIFs behave like images inside Squarespace, you can use them to create animated typography with very little setup. The result is a moving visual effect contained entirely within your text.
The tutorial also demonstrates how Text Fill can be applied across larger bodies of text, opening up opportunities beyond hero headings when the design calls for it.
Add emphasis within body copy
The final section of the tutorial shares two simple typography techniques that work well alongside Text Fill.
The first uses bold text to selectively apply SquareKicker styling within a paragraph, allowing important words or phrases to stand out.
The second shows how individual words can be given their own custom color using Squarespace’s built-in color controls, creating subtle visual hierarchy without affecting the surrounding text.
These small details can help create more considered typography throughout a website, rather than relying only on large headline effects.
Create typography that’s impossible to ignore
Image-filled typography is a simple way to introduce more personality and visual interest into a Squarespace website.
Whether you’re highlighting a campaign message, building a bold hero section, or experimenting with editorial layouts, Text Fill gives you another visual tool for creating custom designs without relying on custom code.
Watch the full tutorial to see the complete workflow in action, then experiment with your own images, gradients, and animated effects to create typography that becomes a central part of your design.
