Collection of free HTML and CSS paper effect code examples.

Demo image: Notebook Paper

Creator

  • Amanda Williamson

Programming language

  • HTML / CSS

Information the code

Notebook Paper

Lined notebook paper with editable text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Paper Textarea

Creator

  • Marc Malignan

Programming language

  • HTML / CSS

Information the code

Paper Textarea

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jesse Wells

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

CSS3 Paper Fold

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Martin Wolf

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS Paper Lift Effect

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: CSS Notebook Paper

Creator

  • Jesse Couch

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Notebook Paper

A sheet of notebook paper with pure CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: CSS3 Paper-Edge Effect

Creator

  • Felix Schwarzer

Programming language

  • HTML / CSS

Information the code

CSS3 Paper-Edge Effect

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Vadim Hermann

Programming language

  • HTML / CSS (SCSS)

Information the code

Folding Paper CSS3 Animation

A CSS3 folding paper animation effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: CSS Stacked Paper Effect

Creator

  • Michael MartinSmucker

Programming language

  • HTML / CSS

Information the code

CSS Stacked Paper Effect

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: