← All elements
<div class="pc-shadow" tabindex="0" role="region" aria-label="Size guide, scrollable">
<h3>Chest size guide</h3>
<ul>
<li><span>XS</span><span>86 cm</span></li>
<li><span>S</span><span>91 cm</span></li>
<li><span>M</span><span>97 cm</span></li>
<li><span>L</span><span>102 cm</span></li>
<li><span>XL</span><span>107 cm</span></li>
<li><span>2XL</span><span>112 cm</span></li>
<li><span>3XL</span><span>117 cm</span></li>
<li><span>4XL</span><span>122 cm</span></li>
</ul>
</div>About this layout
A scrolling panel whose top and bottom shadows appear only while more content is hidden, using layered backgrounds with background-attachment: local. 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.