paper.css is a spiritual successor to
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="https://unpkg.com/@thesephist/paper.css/dist/paper.min.css" />
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
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
Look at me! I'm colorful.
If the accent is too bold, just color the text inside with
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
This text includes an inline paper element.
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,
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
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
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 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
... and without padding, with the
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.
--paper-accent is the accent color
--paper-foreground is the color of the text in paper elements
--paper-background is the color of the paper's background
--paper-border-width determines the width of colored borders
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.