What is CSS Scroll Snap?

CSS Scroll Snap is a CSS module that lets you control scroll snapping behavior. When a scroll container has scroll snapping enabled, it will snap to certain positions during scrolling, creating a paged or carousel-like experience. All modern browsers support it.

What values can scroll-snap-type take?

scroll-snap-type combines an axis (x, y, both, inline, block) and a strictness (mandatory, proximity). Mandatory always snaps to snap positions, while proximity snaps only when near a snap point.

How does scroll-snap-align work?

scroll-snap-align is set on child elements. start aligns the element's start edge with the container's snap position, center aligns the center, and end aligns the end edge.

What's the difference between mandatory and proximity?

mandatory always forces snapping to the nearest snap point, which is consistent but can trap the user if content is larger than the viewport. proximity only snaps when close to a snap point, giving a more natural feel. proximity is recommended for most use cases.

Free Online CSS Scroll Snap Generator - Scroll Snapping Tool

← Back to Home

Updated: 2026-07-11

⚙️ Scroll Container Settings

Configure scroll snapping behavior and alignment.

scroll-snap-type Axis

scroll-snap-type Strictness

scroll-snap-align (child alignment)

Item Gap 16px

Item Count 6

Item Width 220px

scroll-padding (container offset) px

🎨 Preview Colors

Item Background

Text Color

Active Border

👁️ Live Preview

Scroll horizontally in the container below to see snapping in action.

💻 CSS Code

📖 CSS Scroll Snap Explained

CSS Scroll Snap is a CSS specification that controls scroll snapping behavior, creating smooth, paged scrolling experiences.

Key Properties

scroll-snap-type — Defines the axis direction (x/y/both/inline/block) and strictness (mandatory/proximity)
scroll-snap-align — Sets alignment position on child elements (start/center/end)
scroll-padding — Offsets the snap position from container edges
scroll-margin — Offsets the snap position from child edges

When to use CSS Scroll Snap Generator

Image carousels and slideshows
Horizontal paginated menus
Photo galleries
Timeline components
Product browsing cards

Browser Support

All modern browsers (Chrome 69+, Firefox 68+, Safari 11+, Edge 79+) support CSS Scroll Snap.

📜 CSS Scroll Snap Generator