CSS Scroll Snap Generator and Visualizer

Experiment with scroll-snap, visualize, and generate CSS instantly — free, responsive, and easy to use!

Customize Scroll-Snap Properties

Add/remove items, set size, direction, snap type, gap, padding, margin, and each item's align/stop. See the effect live and copy the CSS!

Live Scrollable Demo

📱 Swipe or scroll to see snap behavior in action

Items will snap to their alignment positions as you scroll

Preview & Generated CSS Code

Try scrolling the demo above!

Web Utility Labs