# xeerpe

> xeerpe is a TypeScript library for building CSS backgrounds and gradient text with a chainable API. It stacks gradients (linear, radial, conic, mesh), patterns, effects, filters and animations into a single style object that works anywhere inline styles do: React, Vue, Angular or plain JavaScript. Zero dependencies, fully typed, MIT licensed.

## When to use xeerpe

- Layering a background (mesh gradient, grain, dots, vignette) as one readable chain
- Animated gradient backgrounds without hand-written keyframes
- Backgrounds computed in JavaScript from props, state or a theme
- Ready-made presets (more than 200) in one line
- Gradient text with the same chain

A single static `linear-gradient` is usually simpler as plain CSS.

## Install

```bash
npm install xeerpe
```

## Getting started

- [Installation](https://www.xeerpe.io/guide/installation): Install xeerpe, the CSS background and style builder, with npm, yarn or pnpm and import the animation stylesheet. Setup for CSS, SCSS and Angular.
- [Usage](https://www.xeerpe.io/guide/usage): Build a CSS background style object with the chainable Builder API and apply it in React, Vue, Angular or vanilla JavaScript.

## Essentials

- [Gradients](https://www.xeerpe.io/guide/gradients): Create linear, radial, conic and mesh CSS gradient backgrounds with xeerpe. Every option, color stops and how to layer gradient styles.
- [Filters](https://www.xeerpe.io/guide/filters): Blur a CSS background, an element or its backdrop with the xeerpe blur style. Options, frosted glass examples and type reference.
- [Effects](https://www.xeerpe.io/guide/effects): Add noise, film grain, vignette and glow styles to CSS backgrounds with xeerpe. Every effect option, examples and how effects stack.
- [Patterns](https://www.xeerpe.io/guide/patterns): Add dots, grids, star fields and sunburst rays as pattern styles over your CSS backgrounds with xeerpe. Pattern options, examples and layering.
- [Animations](https://www.xeerpe.io/guide/animations): Animate CSS backgrounds with nine keyframe animation styles, from pulse to drift. Setup, shared options, combinations and reduced motion.
- [Presets](https://www.xeerpe.io/guide/presets): Ready-made CSS background styles in one line of code with xeerpe presets. How presets work, how to extend or rebuild one, and the 100-color palette.

## Examples

- [Presets](https://www.xeerpe.io/guide/presets-examples): Browse more than 200 ready-made CSS background styles, from gold and chocolate to jungle and galaxy. Click a preset to copy its code.

## Optional

- [Changelog](https://www.xeerpe.io/changelog): release history
- [About](https://www.xeerpe.io/about): what xeerpe is and who builds it
- [Full reference](https://www.xeerpe.io/llms-full.txt): API, validation rules, recipes and all presets in one file
- [Agent skill](https://github.com/nicolacentonze/xeerpe/tree/main/plugins/xeerpe): Claude Code skill for writing xeerpe code
- [Source code](https://github.com/nicolacentonze/xeerpe): GitHub repository
- [npm package](https://www.npmjs.com/package/xeerpe): npm package