CSS Page Curl Effect Generator
Instantly generate CSS for a card with a paper-style folded corner
Give a card or document UI that dimensional look of paper curling up at the corner. Pick which of the four corners you want, adjust the curl size, shadow depth, and card and underside colors, and the live preview updates as you go — then copy the finished CSS straight into your project. Everything runs in your browser, and no data is sent anywhere.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Choose the corner you want from the four direction tabs (top-right, top-left, bottom-right, bottom-left).
- Use the sliders to set the curl size and shadow depth until the effect has the depth you want.
- Set the card color and the folded underside color with the color picker or by typing a value.
- Check the preview, then use the "Copy CSS" button at the bottom to grab the finished code.
FAQ
- Can I use the generated CSS on my site as-is?
- Yes. It's plain CSS containing the .curl-card class and its ::before pseudo-element styles — just paste it in and match the class name to your element.
- Can I curl more than one corner at a time?
- The tool generates code for one corner per pass. For multiple corners, select each direction, then combine the resulting CSS into separate classes of your own.
- Does the paper curl really work with CSS alone, no images?
- Yes. A background gradient slices the corner off diagonally, and the pseudo-element layers a gradient plus a drop-shadow filter on top to fake the depth — no images required.