Background Generator
A gallery of 24 animated backgrounds for portfolios and landing pages. You pick one, adjust its colors and take the code with a guide for HTML, React, Vue, Angular or Astro.
How it works
Each background is a single shader written in TSL, the Three.js shading language. The same file drives the preview and the code you export, and WebGPURenderer runs it on WebGPU where available and on WebGL2 everywhere else.
Colors are picked in OKLCH and mixed in OKLab, so gradients do not turn grey in the middle. The exported code is ready for production: it lazy-loads three.js and pauses when it scrolls off screen.