Chain properties and effects to customize your backgrounds and text

SunsetWarm gradient inspired by a real dusk sky

new Builder()
  .linearGradient({ from: '#FFB347', to: '#4A1942' })
  .toStyle()

BreatheRadial gradient with a breath animation

new Builder()
  .radialGradient({ from: '#00D9FF', to: '#050914' })
  .breathe({ duration: '3s' })
  .toStyle()

StarfieldWhite dot pattern over a deep navy gradient

new Builder()
  .linearGradient({ from: '#1a1a2e', to: '#16213e' })
  .dots({ color: '#fff', size: '4px', spacing: '18px', opacity: 0.25 })
  .toStyle()

Northern LightsAnimated multi-layer mesh gradient from preset

new Preset('northern-lights')
  .toStyle()

TideSea-toned mesh gradient, drifting like slow currents

new Builder()
  .meshGradient({ background: '#021b2e', layers: oceanMeshLayers })
  .aurora({ duration: '10s' })
  .toStyle()

LeatherDark brown shade with a rough, leather-like texture

new Builder()
  .linearGradient({ from: '#3E2723', to: '#8D6748' })
  .vignette({intensity: .1, color: '#422a24'})
  .grain({ intensity: 3 })
  .toStyle()

FrostPale icy gradient with a slow shimmering breath

new Builder()
  .linearGradient({ from: '#EAF6FF', to: '#0B3D91' })
  .breathe({ duration: '5s' })
  .toStyle()

xeerpe.io backgroundA green terminal grid glowing over near-black

new Builder()
  .radialGradient({ from: 'rgba(0,255,140,0.12)', to: 'transparent', size: 'closest-side' })
  .linearGradient({ from: '#050705', to: '#0a0f0a', angle: '135deg' })
  .grid({ color: '#00b300' })
  .toStyle()

sunriseA warm sunrise gradient

new Preset('sunrise')
  .toStyle()