Creating a Sticky Note Effect in CSS
Roger Ngo
on Sat Dec 17 2016

Here's a quick and simple tutorial on how to create an aesthetically pleasing sticky note effect in CSS for your web pages. Essentially what the sticky note is composed of is a div element with a CSS class styled to emulate the sticky note we normally see in offices. Our div will have the following style:

  • A background color that is commonly associated with sticky notes.
  • Rotation/tilt of the div using transform.
  • A box shadow to indicate that our sticky note is "pressed onto" a surface.

Here's the markup:

<div class="post-it-note"></div>

The CSS is simple is also straight forward. We'll just apply some padding to make sure our text is not too much towards the edge of the div and will also style the background color to be a sticky note green. We'll then apply the transform code to rotate our div by several degrees.

div.post-it-note {
    padding: 1rem 0.5rem 1rem 0.5rem;
    background-color: rgb(227, 255, 204);
    box-shadow: 0px 2px 2px 3px #dadada;
    transform: rotate(-4deg);
    width: 240px;
    height: 240px;
}

That's all there is pretty much to it. We can create several other child classes that can have different colors or fonts depending on how you would want to implement this.