CSS Page Curl Effect Generator
Create a curled paper-corner CSS effect for cards instantly
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool generates a folded-paper look on the corner of a card or document UI. Pick one of four corners, adjust curl size, shadow intensity, and the card and back-side colors, watch the live preview update, and copy the finished CSS straight into your project. Everything runs in your browser, with nothing sent to a server.
How to use
- Choose a corner from the four tabs: Top-Right, Top-Left, Bottom-Right, or Bottom-Left.
- Use the sliders to set the curl size and shadow opacity to get the look you want.
- Pick the card color and the curl's back-side color with the color picker or text input.
- Check the live preview, then click 'Copy CSS' to grab the finished code.
FAQ
- Can I paste the generated CSS directly into my site?
- Yes, it's plain CSS with a .curl-card class and a matching ::before pseudo-element style — just match it to your own element's class name.
- Can I apply curls to multiple corners at once?
- The tool generates code for one corner at a time. For multiple corners, generate CSS for each direction and combine them under separate class names.
- Does the curl work without any image?
- Yes, it's pure CSS: a background gradient diagonally clips the corner, and a pseudo-element with a matching gradient plus a drop-shadow filter creates the folded look.