This writes the scroll-snap declarations used for horizontal carousels and full-screen sections. Pick an axis and strictness, an alignment, padding, a gap and an item size, and you get one block for the container and one for the items, with a preview right above that you can actually scroll.
Scroll snapping only works when both sides carry declarations: overflow and scroll-snap-type on the container, scroll-snap-align on the items. To move one item per swipe, set scroll-snap-stop to always on the items; to stop the parent from scrolling once the container reaches its end, set overscroll-behavior to contain. Property names and values follow W3C CSS Scroll Snap Level 1 (as of October 2026).
The preview applies the declarations verbatim, but it cannot reproduce touch momentum. This tool does not build JavaScript carousel controls, indicator dots or autoplay. If you pick the both axis, the layout and item sizing are left to you.
Frequently asked questions
mandatory always pulls the scroll to the nearest snap point when it stops, while proximity only snaps when it is already close. For long prose, proximity is the safer choice.
The container needs overflow auto or scroll, and the items need scroll-snap-align. The two declarations must sit on different elements for snapping to work.
Set scroll-padding to the header height and the snap positions shift down by that amount. The same adjustment can be made per item with scroll-margin.