CSS Scroll Snap Generator

How to Use the CSS Scroll Snap Generator

The CSS Scroll Snap Generator lets you create and adjust CSS that makes horizontal or vertical scrolling stop at specified positions while trying the behavior in an interactive preview.

Changes made under “Customize” are reflected in the preview and generated code in real time.

1. Set the scroll direction

Use “Scroll Direction” to choose the direction in which scroll snapping is applied.

• X: Applies scroll snapping horizontally.
• Y: Applies scroll snapping vertically.
• Both: Applies scroll snapping horizontally and vertically.

The generator outputs the appropriate scroll-snap-type and overflow declarations for the selected direction.

For example, selecting X produces CSS like this:

.scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

2. Choose Mandatory or Proximity

Use “Snap Strictness” to control how strongly the container snaps when scrolling ends.

With Mandatory, the container moves to a snap position when scrolling stops, regardless of where it stops. This works well for horizontal scrollers that present distinct cards or layouts that should stop at each section.

With Proximity, the container moves to a snap position only when scrolling stops near one. Choose it when you want scrolling to feel less constrained than Mandatory.

scroll-snap-type: x mandatory;

scroll-snap-type: x proximity;

3. Set Scroll Padding

“Scroll Padding” lets you move the container’s snap reference position inward.

For example, a value of 20px makes the snap position calculate from a point 20px inside the container’s edge.

scroll-padding: 20px;

You can select px, rem, or % as the unit.

Turn on “Set individually” to enter different values for the top, right, bottom, and left sides.

Unlike regular padding, scroll-padding does not add physical space to the layout. Depending on the available scroll range, the first or last item might not be able to reach the specified position.

4. Set the snap alignment

Use “Snap Alignment” to choose where each item aligns inside the container.

Start aligns it with the start edge, Center with the center, and End with the end edge.

scroll-snap-align: start;

When the scroll direction is Both, you can set “Vertical (Block)” and “Horizontal (Inline)” independently.

For example, choosing Start vertically and Center horizontally generates:

scroll-snap-align: start center;

5. Set snap stop behavior

“Snap Stop” controls whether a scrolling operation can pass over a snap position.

Normal provides the default behavior.

Choosing Always adds the following CSS, making it harder to pass over intermediate snap positions during a fast scroll:

scroll-snap-stop: always;

This can be useful when you do not want touch or trackpad gestures to move across several items at once.

6. Set Scroll Margin

“Scroll Margin” adjusts the reference area on the snapping item itself.

scroll-margin: 12px;

scroll-padding is set on the scroll container, while scroll-margin is set on each snap item.

You can select px or rem as the unit. Turn on “Set individually” to enter different values for each side.

7. Change the preview item size and gap

Expand “Preview Settings” to change:

• Item width
• Item height
• Item gap

These are preview-only settings for testing Scroll Snap with different layouts. They are not included in the generated CSS.

Smaller items make it easier to test a carousel that shows several cards at once, while larger items make it easier to test a layout that changes one screen at a time.

8. Change the class names

Expand “Advanced Settings” to change the Scroll Container and Snap Item class names used in the generated code.

The default class names are:

.scroll-container
.scroll-item

Enter only the class name, such as scroll-container, without a leading period. When applying the CSS to existing HTML, you can replace these values with the class names already used in your project.

9. Compare scrolling behavior in the preview

You can scroll the preview with a mouse wheel, trackpad, or touch gesture to test the snapping behavior directly.

Switch “Snap” on or off at the top right of the preview to compare scrolling with and without Scroll Snap.

Turn on “Show guides” below the preview to display guides for:

• Snap alignment
• scroll-padding
• scroll-margin

Keeping the guides visible can make the positional relationships easier to understand when adjusting Scroll Padding or Scroll Margin. Showing or hiding the guides does not affect the generated CSS.

10. Copy the generated CSS

The Scroll Container and Snap Item CSS updates in real time as you change the settings.

For example, the generator can produce:

.scroll-container {
  overflow: auto;
  scroll-snap-type: both mandatory;
  scroll-padding: 20px;
}

.scroll-item {
  scroll-snap-align: start start;
  scroll-margin: 12px;
}

Use the “Copy” button to copy the CSS and use it in your project.

What Is Scroll Snap?

Scroll Snap is a CSS feature for aligning elements inside a scroll area with specified positions when scrolling ends.

For example, it can make a row of cards stop neatly at the start or center of a card instead of leaving a card partially aligned—all with CSS alone.

It can be used for carousel-like horizontal scrollers, vertically paged sections, and grids that scroll in both directions.

Scroll Containers and Snap Items

CSS Scroll Snap involves two main types of elements.

A Scroll Container is the parent element that actually scrolls.

.scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

A Snap Item is a child element inside the scroll container that provides a snap position.

.scroll-item {
  scroll-snap-align: start;
}

scroll-snap-type alone does not determine which elements should snap or how they should align. In most cases, you need to set the relevant properties on both the Scroll Container and its Snap Items.

What Is scroll-snap-type?

The scroll-snap-type property specifies whether an element is a Scroll Container, which axes are affected, and how strictly snap positions are enforced.

scroll-snap-type: <axis> <strictness>;

This generator provides three axis options:

• x: Uses snap positions on the horizontal axis.
• y: Uses snap positions on the vertical axis.
• both: Evaluates snap positions independently on the horizontal and vertical axes.

The two strictness options are mandatory and proximity.

mandatory

With mandatory, if a valid snap position exists, the scroll container must settle on a snap position when the scrolling operation ends and no scrolling is active.

scroll-snap-type: x mandatory;

However, the specification does not prescribe one exact algorithm for choosing the snap position or an exact animation for reaching it. Behavior can therefore vary by browser and scrolling method. It does not mean “always choose the nearest position based only on distance” or “always move exactly one item at a time.”

If a snap item is larger than the visible scroll area, the browser may allow free scrolling while the item covers that area so all of its content remains accessible. Use care when assigning mandatory only to widely separated snap positions, as content between them can become difficult to reach.

proximity

With proximity, the browser decides whether to snap based on factors such as where and how the scrolling operation ends. It tends to snap when scrolling stops near a snap position and to remain at the natural stopping point when farther away, allowing users to stop between snap positions.

scroll-snap-type: y proximity;

The exact distance considered “near” cannot be set in CSS and is determined by the browser.

To use both axes and evaluate snap positions on each one, specify:

scroll-snap-type: both mandatory;

The initial value of scroll-snap-type is none, which disables snapping. If you specify an axis but omit the strictness, proximity is used.

What Is scroll-snap-align?

The scroll-snap-align property specifies where a Snap Item aligns within its Scroll Container.

scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;

When two values are specified, they set the alignment in the Block and Inline directions, respectively.

scroll-snap-align: start center;

In a typical horizontal writing mode, Block generally corresponds to the vertical direction and Inline to the horizontal direction.

What Is scroll-padding?

Set scroll-padding on the Scroll Container to inset the reference area used to calculate snap positions—the snapport—from the edges of the visible scroll area.

.scroll-container {
  scroll-padding: 20px;
}

For example, if there is a fixed header at the top, setting scroll-padding-top to the header’s height lets items snap relative to a position inset by that amount.

Unlike regular padding, it does not add physical space to the element’s layout or scrollable area. If you need actual space before the first item or after the last one, add layout padding or another appropriate spacing rule separately.

What Is scroll-margin?

Set scroll-margin on a Snap Item to expand the item-side reference area used for snap calculations—the snap area—outward from the element’s border.

.scroll-item {
  scroll-margin: 12px;
}

A positive value makes the item snap before its border reaches the snapport edge, creating space between the item and that edge.

While scroll-padding adjusts the reference area for the entire Scroll Container, scroll-margin adjusts it for each Snap Item. You can combine both properties when needed.

CSS Scroll Snap vs. JavaScript Sliders

CSS Scroll Snap uses the browser’s native scrolling behavior and adjusts the final scroll position to a defined snap position.

Unlike a slider powered by a JavaScript library such as Swiper, basic snapping behavior can be implemented with CSS alone.

A JavaScript slider may be more appropriate when you need features such as:

• Autoplay
• Looping
• Pagination
• Previous and next buttons
• Complex slide control

For a simple horizontal scroller or section-by-section snapping, CSS Scroll Snap is often sufficient.

FAQ