Corner Peel
A copy-paste image effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Image EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Corner Peel -->
<figure class="nuda-ie2-peel">
<img class="nuda-ie2-peel__img" src="/your-image.jpg" alt="" />
<span class="nuda-ie2-peel__flap" aria-hidden="true"></span>
</figure>CSS
.nuda-ie2-peel {
position: relative;
width: 200px;
height: 140px;
overflow: hidden;
border-radius: 10px;
margin: 0;
}
.nuda-ie2-peel__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.nuda-ie2-peel__flap {
position: absolute;
right: 0;
top: 0;
width: 56px;
height: 56px;
background: linear-gradient(135deg,#eee 0%,#bbb 45%,#888 100%);
clip-path: polygon(100% 0,0 0,100% 100%);
transform: rotate(0deg) translate(0,0);
transform-origin: 100% 0%;
box-shadow: -2px 2px 6px rgba(0,0,0,.35);
transition: transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s;
}
.nuda-ie2-peel:hover .nuda-ie2-peel__flap {
transform: rotate(-16deg) translate(-6px,6px);
box-shadow: -10px 12px 18px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce) {
.nuda-ie2-peel__flap {
transition: none !important;
}
}
How to use Corner Peel
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.