CSS Tools

Scroll Snap Builder

Build CSS scroll-snap layouts with a live preview. Configure direction, snap type, and alignment.

Options
CSS Output
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  width: 300px;
  height: 300px;
}

.scroll-item {
  scroll-snap-align: start;
  width: 100%;
  min-height: 300px;
}
Live Preview
1
2
3
4
5