← All elements
<article class="pc-paper">
<h3>Packing slip</h3>
<p>Handle with care. Fragile ceramics inside.</p>
</article>About this card
A card that looks like a pile of paper sheets, built from offset box-shadows, and the pile fans out slightly on hover.
How it works
The card looks like a pile of paper because its box-shadow is a stack of offset layers. Each sheet is a white shadow with a negative spread, followed by a grey outline shadow at the same offset. On hover the offsets grow from 6px and 12px to 9px and 18px, so the pile fans out.
Ways to customise it
- Add another white and grey pair of shadows for a thicker pile.
- Change #cfd3e3 for a different edge colour.
- Raise the hover offsets for a bigger fan.
Good to know
Shadows are painted outside the box, so the card has a bottom and right margin to make room for them. If you remove that margin, the pile can be clipped by a parent with overflow hidden.
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.