Collection of free HTML and CSS paper effect code examples from Codepen, Github and other resources. Update of February 2021 collection. 12 new items.

Demo image: Paper Prototype CSS

Author

  • Terence Eden

Made with

  • HTML / CSS

About a code

Paper Prototype CSS

CSS designed to look a bit like a paper prototype.

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

Responsive: yes

Dependencies: -

Demo image: Pretty Map folding with CSS

Author

  • Staridas Geography

Made with

  • HTML / CSS

About a code

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.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pinned Card

Author

  • Suzanne Aitchison

Made with

  • HTML / CSS

About a code

Pinned Card

A little experiment with a pinned card effect using CSS.

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

Responsive: no

Dependencies: -

Demo image: Paper with Sellotaped Corners

Author

  • Suzanne Aitchison

Made with

  • HTML / CSS

About a code

Paper with Sellotaped Corners

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

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

Responsive: no

Dependencies: -

Demo image: Paper

Author

  • Nils Binder

Made with

  • HTML / CSS (SCSS)

About a code

Paper

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Folded Paper Login Form

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

Responsive: yes

Dependencies: -

Demo image: Paper

Author

  • magnificode

Made with

  • HTML / CSS (SCSS)

About a code

Paper

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

Responsive: no

Dependencies: -

Demo image: Paper

Author

  • Camila Waz

Made with

  • HTML / CSS (SCSS)

About a code

Paper

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

Responsive: yes

Dependencies: -

Demo image: Paper

Author

  • Ruphaa Ganesh

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Paper

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

Responsive: no

Dependencies: -

Author

  • Saman Rohani

Made with

  • HTML / CSS (SCSS)

About a code

CSS Paper Works

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

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

Responsive: no

Dependencies: -

Author

  • Dami├ín Muti

Made with

  • HTML / CSS (SCSS)

About a code

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.

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

Responsive: yes

Dependencies: -

Author

  • Bastian Andre

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Lifted Paper Strips (Hover Effect)

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

Responsive: yes

Dependencies: -

Demo image: Brochure

Author

  • Ruslan Pivovarov

Made with

  • HTML / CSS (SCSS)

About a code

Brochure

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

Responsive: no

Dependencies: -

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: -

Author

  • Messiah7

Made with

  • HTML / CSS

About a 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: 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: Notepad

Author

  • Timothy Miller

Made with

  • HTML / CSS

About a code

Notepad

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

Responsive: yes

Dependencies: -

Demo image: CSS3 Paper Effect

Author

  • Nomack

Made with

  • HTML / CSS

About a code

CSS3 Paper Effect

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: -

Demo image: CSS Notepad Paper

Author

  • Charlotte Dann

Made with

  • HTML / CSS (Sass)

About a code

CSS Notepad Paper

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

Responsive: no

Dependencies: -