← All elements
<div class="sh"><span>Design</span><span>CSS</span><span>Animation</span><span>Layout</span><span>Forms</span><span>Menus</span><span>Loaders</span></div>About this carousel
A horizontally scrolling shelf of chips with scroll-snap and a soft fade on the edges, no scrollbar and no script.
How it works
A flex row with overflow-x: auto becomes a horizontal scroller, and scroll-snap-type: x proximity lets chips settle gently into place. A mask-image gradient fades the left and right edges so the cut-off chips look intentional. The scrollbar is hidden with scrollbar-width and a WebKit rule.
Ways to customise it
- Change proximity to mandatory for a firmer snap.
- Edit the chip padding and radius.
- Adjust the percentages in the mask to make the fade longer or shorter.
Good to know
Scrolling works with touch, trackpads and the keyboard when the shelf is focusable. Hidden scrollbars can hide the fact that more content exists, so keep the faded edges. mask-image is supported in current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.