Visual generators for design and front-end work — in your browser, no account, no server.
Demo · Features · Quick start · Contributing
- Layout: drag & drop Grid, grid-area, subgrids, auto-fill / auto-fit, Flex, breakpoints, CSS import, export to CSS / Tailwind / JSX
- Color: palettes from a single color, CSS tokens, palette from an image
- Decor: clip-path, blob, waves, patterns, shadows, glassmorphism, dividers, arrows, sunburst, SVG lines, CSS mask
- Generative graphics: animated mesh gradients, aurora, lava, low-poly and Voronoi, flow field, contour lines, Bauhaus, dither, ASCII, pixel art
- Animation and 3D: CSS animations and effects, particles, three.js scenes, scroll video
- Extras: unit converter, device mockup editor, OG images, favicon generator
Everything runs locally: your files and images never leave the browser.
Open any tool directly in the live demo:
| Group | Tools |
|---|---|
| Layout | Grid · Flex · Palette |
| Backgrounds | Mesh gradient · Patterns · Shape backgrounds · Contours · Rays and spirals · Aurora · Lava lamp · Photo as background |
| Generative | Bauhaus grids · Low-poly / Voronoi · Flow field · Dither and halftone · ASCII art · Pixel-art · Synthwave |
| Shapes and decor | Dividers · Waves · Blob · clip-path · Lines and squiggles · Arrows |
| Effects | Glassmorphism · CSS mask · CSS effects · Shadows |
| 3D and motion | 3D scenes · CSS animations · Particles · Scroll video |
| Media and assets | Mockups · OG images · Favicon |
| Typography | Font units |
git clone https://github.com/vumox/layout-forge.git
cd layout-forge
npm install
npm run devBuild with npm run build — the output in dist/ is static and works on any host. Checks: npm run typecheck, npm run lint, npm test.
React 19 · TypeScript · Vite · Tailwind CSS v4 · shadcn/ui (Base UI) · three.js
Ideas, bug reports and PRs are welcome — see CONTRIBUTING.md. To report a vulnerability, see SECURITY.md.
MIT © vumox