See-Through Sticky Text Overlay

What You'll Create

A striking visual effect where your heading becomes transparent with just an outline stroke, allowing background images and content to show through the letterforms. The text stays locked in place while other elements scroll behind it, creating depth and visual interest.

The Problem It Solves

Squarespace doesn't offer transparent text or text stroke effects natively. Without code, you'd need to create this as a static image, losing flexibility and accessibility. This technique gives you live, editable text that reveals what's behind it.

Perfect For

Hero sections, Portfolio intros, Brand storytelling, Creative agency sites, Editorial layouts

What Makes This Different

This technique layers two text elements on top of each other—one solid fill and one with just a stroke outline. Both stay fixed in the center of the viewport while images or content scroll behind them. The transparent fill on the top layer lets you see through the letters, creating that cut-out effect that's popular in modern editorial design. As you scroll, different background elements peek through the letterforms.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Fluid Engine section, Multiple blocks vertically stacked, Text block with heading

• Toolkit Title: See-Through Sticky Text

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support