BUILDJUNIOR

Build a CSS Art Generator

45 minutes

0 completed

csscreative-codinggenerativereact

Description

Build a CSS Art Generator

Build a tool that generates random CSS-only illustrations with adjustable parameters and live code preview.

Requirements

Generate random CSS illustrations using only div elements and CSS properties

Slider controls for: shape count, color palette, complexity, border radius, rotation

Live preview that updates in real-time as sliders change

Show the generated CSS code alongside the visual

Copy CSS button

Gallery of 10+ hand-crafted presets (animals, landscapes, abstract shapes)

Randomize button for instant new art

Technical Notes

Use CSS properties creatively: gradients, box-shadow (multiple), border-radius, clip-path, transforms. Each "art piece" is a single div or minimal DOM.

Bonus Points

Export as SVG

Animation toggle (CSS keyframes)

Share via URL with encoded parameters

You will be guided through MCP setup before the timer starts