Collection of HTML and CSS Paper Effect Code Examples

Paper Prototype CSS

CSS designed to look a bit like a paper prototype.

Pretty Map folding with CSS

Looks like a folded piece of paper, right? Perhaps a background image or something? Well, this is 100% pure CSS.

Pinned Card

A little experiment with a pinned card effect using CSS.

Paper with Sellotaped Corners

Playing around with CSS to make a sellotaped paper effect - posting up some little new years reminders.

Paper

Folded Paper Login Form

Paper

Paper

Paper

CSS Paper Works

A handful of pure CSS paper effects like fold, stacked, ruled (lined), and lift.

CSS-Only Letter-Like Form with Inline Fields

This is a really simple example that takes advantage of HTML's contentEditablecode attribute and the :empty pseudo selector to simulate inline-style form fields in a letter fashion. There's also some motion blur magic going on.

Lifted Paper Strips (Hover Effect)

Brochure

Notebook Paper

Lined notebook paper with editable text.

Paper Textarea

CSS3 Paper Fold

Pure CSS Paper Lift Effect

CSS Stacked Paper Effect

Creating a messy stack of papers using the magic of CSS transforms and generated content.

CSS Notebook Paper

A sheet of notebook paper with pure CSS.

Notepad

CSS3 Paper Effect

CSS3 Paper-Edge Effect

Single-element paper-edges for images, galleries, notifications, ads, etc..

Folding Paper CSS3 Animation

A CSS3 folding paper animation effect.

CSS Stacked Paper Effect

Creating a messy stack of papers using the magic of CSS transforms and generated content.

CSS Notepad Paper