Lightweight, modern CSS to add some flair to your web-things


paper.css is a spiritual successor to blocks.css, a small library I'd made to add a nice, modern design aesthetic to web apps without much work. paper.css carries the same simplicity, focus on a single visual motif, and customizability thorugh CSS variables.

paper.css is a single stylesheet. Get started by adding the stylesheet to your page's head.

<link rel="stylesheet" href="" />

A single paper element looks like this.

I'm a paper element.

It's a static piece of paper hovering over the page. We make an element into a paper element by adding the paper class. We can further customize our paper element by adding other properties through extra classes on the element.

Make the paper accented with a theme color with the accent class.

Look at me! I'm colorful.

If the accent is too bold, just color the text inside with the colored class.

I'm a little more subtle.

A paper element is normally a display: block element. To use a paper element inline, add the inline class to turn it into an inline-block.

This text includes an inline paper element.

Movable paper

The real appeal of paper elements is that the elevation off the page can make interactive animations delightful. To mark a paper element as interactive, add the movable class.

I'm a movable paper element.

Try hovering over and clicking on the movable paper above.


Movable elements are font-weight: bold. If you don't like it, you can override the property on .movable.paper elements in your own CSS.


One other visual accent we can add to paper elements is a single-sided border. A paper card with a border can subtly draw attention to itself and come off as less boring than a simple paper card.

We can add a border to a side of any paper element by adding the class paper-border-{{side}}, where side can be any of top, right, bottom, or left. Here's what those look like.


We can also add multiple borders to the same element by using multiple classes.

paper-border-left paper-border-right


Paper elements have a small padding by default. If we're making a paper element from an <img> or some other element that should take up the entire paper area, add a wrap class to remove that padding.

With padding:

test image

... and without padding, with the wrap class.

test image

Similar things work for videos, inputs, textareas, and other such elements.


We can theme the color scheme of a paper.css page using CSS custom properties. There are four variables you can adjust.

To test theming, to switch the theme of this page.


I'm using paper.css for most of my side projects since summer 2020, including these below.

Of course, this demo page is also built with paper.css.