Collection of free HTML and CSS paper effect code examples.

8 CSS Paper Effects

Collection of free HTML and CSS paper effect code examples.


Demo image: Notebook Paper

Author

  • Amanda Williamson

Made with

  • HTML / CSS

About the code

Notebook Paper

Lined notebook paper with editable text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Paper Textarea

Author

  • Marc Malignan

Made with

  • HTML / CSS

About the code

Paper Textarea

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jesse Wells

Made with

  • HTML (Haml) / CSS (Sass)

About the code

CSS3 Paper Fold

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Martin Wolf

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Paper Lift Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Notebook Paper

Author

  • Jesse Couch

Made with

  • HTML / CSS (SCSS)

About the code

CSS Notebook Paper

A sheet of notebook paper with pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS3 Paper-Edge Effect

Author

  • Felix Schwarzer

Made with

  • HTML / CSS

About the code

CSS3 Paper-Edge Effect

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Vadim Hermann

Made with

  • HTML / CSS (SCSS)

About the code

Folding Paper CSS3 Animation

A CSS3 folding paper animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Stacked Paper Effect

Author

  • Michael MartinSmucker

Made with

  • HTML / CSS

About the code

CSS Stacked Paper Effect

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

back to top