25 CSS Paper Effects

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

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

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

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

About a code

Paper

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

Responsive: yes

Dependencies: -

About a code

Folded Paper Login Form

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

Responsive: yes

Dependencies: -

About a code

Paper

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

Responsive: no

Dependencies: -

About a code

Paper

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

Responsive: yes

Dependencies: -

About a code

Paper

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

Responsive: no

Dependencies: -

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

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

About a code

Lifted Paper Strips (Hover Effect)

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

Responsive: yes

Dependencies: -

About a code

Brochure

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

Responsive: no

Dependencies: -

About the code

Notebook Paper

Lined notebook paper with editable text.

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

Responsive: no

Dependencies: -

About the code

Paper Textarea

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

Responsive: yes

Dependencies: -

About the code

CSS3 Paper Fold

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

Responsive: no

Dependencies: -

About the code

Pure CSS Paper Lift Effect

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

Responsive: no

Dependencies: -

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

About the code

CSS Notebook Paper

A sheet of notebook paper with pure CSS.

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

Responsive: no

Dependencies: -

About a code

Notepad

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

Responsive: yes

Dependencies: -

About a code

CSS3 Paper Effect

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

Responsive: no

Dependencies: -

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

About the code

Folding Paper CSS3 Animation

A CSS3 folding paper animation effect.

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

Responsive: no

Dependencies: -

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

About a code

CSS Notepad Paper

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

Responsive: no

Dependencies: -