Write your note
Type whatever reminder or message you want the note to hold.
CSS Sticky Note Generator
Build a sticky-note styled card with a realistic folded corner. Pick a color and rotation, then copy the CSS.
Ready-to-use CSS
How it works
Pick a color and tilt
Choose from classic sticky-note colors and a natural rotation angle.
Copy the CSS
Get a self-contained class with the folded-corner shadow effect included.
FAQ
How is the folded corner created?
A pseudo-element is positioned in the corner with a diagonal background gradient and its own small shadow, creating the illusion of a lifted paper fold using only CSS.
Can I stack several sticky notes together?
Yes. Copy the class onto multiple elements with different rotation values for a natural, scattered sticky-note board look.
Does the rotation affect the text?
No, only the whole note rotates as a card; the text inside stays upright and readable relative to the note.