← All elements
<ul class="fe"><li>Alpha</li><li>Bravo</li><li>Charlie</li><li>Delta</li><li>Echo</li><li>Foxtrot</li><li>Golf</li><li>Hotel</li></ul>About this layout
A scrollable list whose top and bottom edges fade away with a CSS mask instead of a hard cut.
How it works
The list scrolls vertically while a mask-image with a linear gradient fades the top and bottom 22px to transparent. The scrollbar is hidden, and the mask means no extra overlay elements are needed.
Ways to customise it
- Change the 22px fade size.
- Add more items.
- Use the mask on a horizontal list.
Good to know
Masks fade the content visually, so keep important items away from the edges. Make the list focusable if it must be scrolled by keyboard.
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.