CSS Scroll Snap Generator

Generate CSS scroll-snap properties with live preview

Scroll Direction

Snap Strictness

Item Alignment

Preview Items: 5

Live Preview

Generated CSS

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow: auto;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  
}

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