CSS Scroll Snap Generator

Build smooth snapping carousels, sliders, and full-page scroll experiences with pure CSS.

Configuration

Direction

scroll-snap-type

scroll-snap-align

scroll-padding: 16px

Live Preview

Scroll horizontally to see snap in action

mandatory vs proximity

mandatory — always snaps to nearest point, even mid-scroll.

proximity — snaps only when close enough. Less aggressive.

snap-align positions

start — item start aligns with container start.

center — item centered in container.

end — item end aligns with container end.

Generated CSS

.scroll-container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 16px;
  /* Hide scrollbar (optional) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 280px;
  height: auto;
}