← All elements
<a class="pc-curl" href="#"><span>New<br>arrivals</span></a>About this hover effect
A gradient card with a small folded corner that peels back further on hover, drawn as one diagonal gradient on a pseudo-element.
How it works
The card is a link with a diagonal gradient background. A pseudo-element in the bottom right corner paints a second gradient split at 50 percent, which reads as a folded flap. On hover or focus the pseudo-element grows from 24px to 72px, so the fold appears to peel back further.
Ways to customise it
- Change the card gradient to match your brand.
- Raise the 72px hover size for a bigger curl.
- Edit the three flap colours so they match the page behind the card.
Good to know
The revealed corner colour has to match whatever sits behind the card, or the fold will look like a patch. The focus-visible rule gives keyboard users the same peel and an outline.
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.