Atelier turns motion, colour, form and layout into hands-on studios. Drag, tune and play until it feels right, then take home clean, framework-free code.
Every studio has its own colour, shape and personality, and they share one header, so moving between them takes a single click.
CSS animation generator
Choreograph CSS keyframe animations on a visual node graph. Run sequences in parallel, wait for them to sync, and tailor timing for every breakpoint.
CSS gradient generator
Paint mesh-like gradients by placing colour emitters on a canvas. Shape how far each one reaches and export perceptually smooth OKLCH CSS.
CSS property playground
Put any visual CSS property under the microscope. Shadows, filters, clip-paths, transforms and type, each with live controls, guides and copy-ready code.
CSS Grid & Flexbox layout builder
Build responsive page structures visually with CSS Grid and Flexbox. Add sticky headers and sidebars, resize the viewport live, and export semantic HTML and CSS.
Use one studio for a quick answer, or walk through all four to build an interface from structure to motion.
Lay out regions and responsive behaviour in IntrinsicFlow.
Refine shadows, radii and filters in Specimen Lab.
Paint rich, smooth backgrounds in ChromaFlow.
Bring it all to life with Kinetix Studio.
Yes. Every studio is free and open source under the MIT License. There is no sign-up and no paid tier.
No. Each studio opens straight in your browser.
Plain, framework-free CSS (and semantic HTML for layouts) that you can paste into any project, framework or design system.
No. Everything happens on your own device; the studios only hand you code to copy.
Current versions of Chrome, Edge, Safari and Firefox. The studios are designed for desktop screens and adapt down to tablets and phones.
Atelier is one of the projects in csslib, a collection of open-source CSS projects that also includes the Vektor.css charting library.
No account, no install, no lock-in. Just CSS you can see and code you can keep.
