ffee All tools
EN 中文 FR DE

Scroll Snap Generator

Build scroll snap rules, test them on a working scroller and copy the finished CSS.

Build scroll snap rules

1
2
3
4
5
6
scroll-snap-type: — · align: — · stop: —
Vertical snapping needs a fixed scroller height and a column direction, which the generated rule sets for you. Press Next stop to jump along the scroller.

How to use the Scroll Snap Generator

  1. Choose the snap axis and whether snapping is mandatory or a proximity hint.
  2. Set the alignment, the snap stop, the scroll padding and the item size.
  3. Press Next stop to test the scroller, then copy the generated rules.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator

Frequently Asked Questions

Common questions about the free online scroll snap generator.

It makes a scroll container rest on chosen points, so a swipe always lands with an item neatly aligned instead of stopping at a random offset.
Mandatory always snaps to the nearest point, while proximity only snaps when the scroll ends close enough to a snap point.
Set overflow-x to auto, scroll-snap-type to x mandatory on the container and scroll-snap-align on each child item.
The scroller needs a fixed height and a column direction, otherwise the children grow with the content and nothing scrolls.
It insets the snap area, which keeps sticky headers or outer padding from covering the item that snaps into view.
It stops a fast fling at the very next snap point instead of skipping several items in one gesture.
Yes. Set scroll-snap-align to center and each item rests in the middle of the scroller rather than at its start edge.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and no upload.

Last updated: October 10, 2026