Generator Tools

CSS Scroll Snap Generator

Build CSS scroll snap rules for carousels and full-page sections. Live preview, presets, scroll-snap-type, align, stop, padding, plus CSS, HTML, Tailwind.

Quick presets

Live preview

Scroll inside the box. The container uses the exact CSS the tool will copy, so the snap behavior here matches production.

Browser support: CSS Scroll Snap is supported in every evergreen browser since 2019. The scroll-snap-stop: always keyword needs Chrome 75+, Edge 79+, Safari 15+, Firefox 103+.

Direction

Snap axis (scroll-snap-type)

Strictness

Mandatory means the viewport must land on a snap target after every gesture. Use for carousels and full-page sections.

Snap alignment (scroll-snap-align)

Each child snaps so its leading edge sits at the snapport start.

Scroll stop (scroll-snap-stop)

Each scroll gesture stops at the next snap target. Great for carousels.

Sizing and spacing

Item size280px

Width of each card (flex-basis on the row).

Gap between items16px

Spacing between siblings inside the container.

Scroll padding16px

Insets the snapport. Useful when a sticky header overlaps the scroller.

Item count6

Number of demo items rendered in the preview and HTML output.

Container size640px

Visible width of the carousel (the preview container).

Output options

Scope to a class (recommended)Class nameThe CSS targets .scroll-snap-container and its direct children. Apply the class to any scrollable element.

CSS

.scroll-snap-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  scroll-behavior: smooth;
}

.scroll-snap-container > * {
  flex: 0 0 280px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Container rules set scroll-snap-type and scroll-padding. Child rules set scroll-snap-align and scroll-snap-stop.

HTML markup

<div class="scroll-snap-container">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
  <div class="card">Item 4</div>
  <div class="card">Item 5</div>
  <div class="card">Item 6</div>
</div>

Pair this with the CSS on the left. The direct children inherit the snap-align rule, so they all become snap targets.

Tailwind classes (container)

flex flex-row overflow-x-auto overflow-y-hidden gap-[16px] snap-x snap-mandatory [scroll-padding:16px] scroll-smooth

Uses Tailwind v3+ snap utilities and arbitrary-value brackets for scroll-padding.

Tailwind classes (children)

shrink-0 basis-[280px] snap-start snap-always

Apply to every direct child of the container.

Child-only CSS

.scroll-snap-container > * {
  flex: 0 0 280px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Use this block when the container already exists in your project and you only need the snap rules for its children.

Property reference

scroll-snap-typeSet on the container. Combines axis (x, y, both) and strictness (mandatory, proximity).
scroll-paddingInsets the snapport so cards do not land flush against a sticky header or edge.
scroll-snap-alignSet on the snap targets. Decides whether the start, center, or end of the child aligns with the snapport.
scroll-snap-stopSet on the snap targets. "always" forces one snap per gesture; "normal" allows fast flicks to skip past several.
scroll-marginOptional. Per-child outset that shifts where the snap point sits relative to the child's box.
scroll-behaviorOptional. "smooth" animates programmatic scroll calls. Not strictly part of CSS Scroll Snap but commonly paired.

How to use

Pick a preset (Card carousel, Full-page sections, Image gallery, Timeline) or jump straight into the controls.
Choose a direction (horizontal or vertical) and the snap axis (x, y, or both) along with a strictness (mandatory or proximity).
Set scroll-snap-align for the snap targets (start, center, end, or none) and decide whether scroll-snap-stop should force one snap per gesture.
Tune the sizing controls: item size, gap, scroll padding, item count, and container size. Watch the live preview update on every change.
Copy the scoped CSS, the HTML markup, or the Tailwind classes for the container and the children, then drop them into your project.

About this tool

CSS Scroll Snap Generator builds the CSS Scroll Snap Module Level 1 rules you need for a carousel, an image gallery, a full-page section experience, or a timeline view, and shows the result in a live scroll container that uses the exact properties the tool will copy. Pick a direction (horizontal carousel or vertical sections), tune the snap axis (x, y, or both), pick a strictness (mandatory for must-snap layouts, proximity for gentle assistance), set scroll-snap-align (start, center, end, or none), and decide whether scroll-snap-stop should force one snap target per gesture or let fast flicks skip past several. Sizing controls cover item size, gap, container size, scroll-padding (the inset that keeps cards from landing flush against a sticky header), and how many demo items render in the preview. Output covers three integrations at once. A scoped CSS block keyed to a class name (default .scroll-snap-container) ships the container rules plus a > * selector that turns every direct child into a snap target. A child-only block is available for projects where the container is styled elsewhere. A Tailwind v3+ utility shorthand uses the built-in snap-x, snap-y, snap-mandatory, snap-proximity, snap-start, snap-center, snap-end, snap-always, and snap-normal classes, with arbitrary-value brackets for the numeric scroll-padding and item-size values. A property reference panel explains scroll-snap-type, scroll-padding, scroll-snap-align, scroll-snap-stop, scroll-margin, and scroll-behavior so the page doubles as a study sheet. Presets cover the four most common scroll-snap layouts: a card carousel, full-page vertical sections, a centered image gallery, and a vertical timeline. CSS Scroll Snap shipped to every evergreen browser in 2019 (Chrome 69, Firefox 68, Safari 11, Edge 79); the scroll-snap-stop: always keyword needs Chrome 75+, Edge 79+, Safari 15+, Firefox 103+. Everything runs locally in your browser. No CSS, color value, layout setting, or class name leaves your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Scroll Snap Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Scrollbar Generator

CSS Flexbox Generator

CSS Grid Generator

CSS Container Query Generator

CSS Animation Generator