Chain it.
Gradient text
The same chain, applied to text with toTextStyle().
new Builder()
.linearGradient({ colors: ['#5EB847', '#CAD328', '#ffd166'], angle: '90deg' })
.toTextStyle()
craft().chain().done()
Style CSS backgrounds and text by chaining properties and effects
- Zero dependencies
- Fully typed
- Any framework
Build any CSS background, one method at a time
Describe it the way you would say it out loud. Each method adds a layer, and toStyle() turns the chain into a style object.
- 01
Craft a glow
Start with a soft amber light in the corner.
.radialGradient({ … }) - 02
Put something dark underneath
Layers added later are drawn below the earlier ones.
.linearGradient({ … }) - 03
Lay a pattern over the top
Patterns always sit above the gradients.
.dots({ … }) - 04
Add texture
Film grain and a vignette give it depth.
.grain().vignette() - 05
Make it move
One more method, and the whole card floats.
.float()
The whole chain
new Builder()
.radialGradient({ from: '#FF7A18', to: 'transparent', position: '75% 25%', colorToPosition: '60%' })
.linearGradient({ from: '#1a0b05', to: '#060302', angle: '160deg' })
.dots({ color: '#FF7A18', size: '24px', opacity: 0.14 })
.grain({ intensity: 2 })
.vignette({ intensity: 0.6, spread: 0.5 })
.float({ duration: '5s' })
.toStyle()- 01
Light up the aurora
Start with a soft emerald glow in the corner.
.radialGradient({ … }) - 02
Blend in a second color
A violet light on the other side, layered over the first.
.radialGradient({ … }) - 03
Put the night underneath
Layers added later are drawn below the earlier ones.
.linearGradient({ … }) - 04
Scatter some stars
Patterns always sit above the gradients.
.stars() - 05
Let it breathe
One more method, and the whole sky starts to move.
.aurora()
The whole chain
new Builder()
.radialGradient({ from: 'rgba(16,185,129,0.85)', to: 'transparent', position: '20% 30%', colorToPosition: '60%' })
.radialGradient({ from: 'rgba(168,85,247,0.6)', to: 'transparent', position: '80% 70%', colorToPosition: '60%' })
.linearGradient({ from: '#04121c', to: '#02060c', angle: '180deg' })
.stars()
.aurora({ duration: '8s' })
.toStyle()- 01
Fire an orange beam
A hard light rising from the bottom edge.
.radialGradient({ … }) - 02
Answer with electric blue
The opposite color from the top, layered over the first.
.radialGradient({ … }) - 03
Cut to black
A deep navy base keeps the colors electric.
.linearGradient({ … }) - 04
Lay down a grid
A thin amber grid gives it a digital floor.
.grid({ … }) - 05
Charge the edges
An inner glow makes the whole card hum.
.glow({ … })
The whole chain
new Builder()
.radialGradient({ from: '#ff7a00', to: 'transparent', position: '50% 110%', colorToPosition: '60%' })
.radialGradient({ from: '#2d6bff', to: 'transparent', position: '50% -10%', colorToPosition: '55%' })
.linearGradient({ from: '#06031a', to: '#010008', angle: '180deg' })
.grid({ color: '#ff9f43', size: '24px', opacity: 0.16 })
.glow({ type: 'inner', color: 'rgba(255,159,67,0.45)', amount: '36px' })
.toStyle()- 01
Glow in the corner
A soft candy-pink light, top left.
.radialGradient({ … }) - 02
Deepen the other corner
A richer raspberry on the opposite side.
.radialGradient({ … }) - 03
Fill in the pink
A flat base color under both glows.
.linearGradient({ … }) - 04
Add the polka dots
Big, regular dots sit above every gradient.
.dots({ … }) - 05
Make it bounce
One more method, and the whole card floats.
.float()
The whole chain
new Builder()
.radialGradient({ from: '#ff9eb3', to: 'transparent', position: '25% 25%', colorToPosition: '55%' })
.radialGradient({ from: '#e8436a', to: 'transparent', position: '90% 90%', colorToPosition: '55%' })
.linearGradient({ from: '#ff6b8b', to: '#ff5c7f', angle: '135deg' })
.dots({ color: '#ffffff', size: '28px', strokeWidth: '4', opacity: 0.35 })
.float({ duration: '5s' })
.toStyle()Metals, gems, skies and more
Every preset is a regular Builder, so you can keep chaining effects, patterns and animations on top.
Real interface pieces, no presets needed
Text, glass panels, buttons, avatars and loaders. The same chain works on any element.
Frosted glass
Frosted glass
A translucent panel that blurs whatever sits behind it.
new Builder()
.linearGradient({ from: 'rgba(255,255,255,0.22)', to: 'rgba(255,255,255,0.06)' })
.blur({ amount: '14px' })
.toStyle()Neon button
Two glows, one outside and one inside, make a neon outline.
new Builder()
.linearGradient({ from: '#06080f', to: '#0b1020' })
.glow({ color: '#22d3ee', amount: '18px' })
.glow({ type: 'inner', color: '#22d3ee', amount: '12px' })
.toStyle()NC
Avatar ring
A conic gradient that spins around a profile picture.
new Builder()
.conicGradient({ colors: ['#5EB847', '#CAD328', '#22d3ee', '#7a5cff', '#5EB847'] })
.rotate({ duration: '4s' })
.toStyle()Loading skeleton
A light band that slides across placeholder content.
new Builder()
.linearGradient({
colors: ['#1c2620', '#2f3d34', '#1c2620'],
angle: '90deg',
backgroundSize: '200% 100%',
})
.shimmer({ duration: '1.6s' })
.toStyle()New229 presetsOne line of code each.
Spotlight card
A corner light, a dark base, dots and an inner glow.
new Builder()
.radialGradient({ from: 'rgba(94,184,71,0.35)', to: 'transparent', position: '0% 0%', colorToPosition: '70%' })
.linearGradient({ from: '#0c140e', to: '#060906' })
.dots({ color: '#5EB847', size: '18px', opacity: 0.18 })
.glow({ type: 'inner', color: 'rgba(94,184,71,0.35)', amount: '30px' })
.toStyle()
craft().chain().done()
Zero dependencies, any framework.
Install it and write your first chain in a minute.
Yes, this background is made with xeerpe too :)
Released under the MIT License – © 2026 Nicola Centonze