About

xeerpe is a TypeScript library for building CSS backgrounds with a chainable API. You describe the layers you want, and it gives you back the styles.

The idea

Describe a background the way you'd say it out loud. Start with a green glow, put something dark underneath, lay a grid over the top. xeerpe turns that into CSS.

import { Builder } from "xeerpe";
 
Builder()
  .radialGradient(...)
  .linearGradient(...)
  .grid(...)
  .toStyle()

You create a Builder, chain whatever you need, and finish with toStyle(). Everything in between is just a method.

What you can make

Linear, radial and mesh gradients, stacked as many times as you like. Patterns on top, like grids, dots and grain, for when a flat gradient feels too clean. And animation, which you add once at the end of the chain so the whole background moves as a single thing instead of layer by layer.

Open source

It's free to use, read and break. The code lives on GitHub and the package is on npm. If something feels clumsy, open an issue. If you already know how to fix it, even better.

Who's behind it

I'm Nicola Centonze, a Frontend Engineer working mostly with design systems and component libraries. xeerpe is one of my open source projects.

If you make something nice with it, I'd love to see it.