Build a glass curtain Scroll reveal

Add shine and interest to any site with a glass curtain effect that reveals content as users scroll. In this short tutorial, you’ll use CSS grid, repeaters, Glass effect, Sticky positioning, and Scroll effects to create glass panels that slide away to reveal your content—then make the whole experience responsive across desktop, tablet, and mobile.

Create a cinematic Scroll moment with a glass curtain reveal. In this tutorial, learn how to build two glassy curtains using repeaters, gradients, and the Glass effect. From there, you’ll pin your content and glass panels, add Scroll effects so each side moves in opposite directions, and control the timing to get the final effect.