Design Tools
5 tools
Interactive CSS generators with live previews. Copy and paste into your project.
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
About Design Tools
Design Tools are interactive CSS generators with live previews. Whether you need a custom gradient, layered box-shadow, a flexbox layout that finally clicks, perfectly rounded corners with elliptical variations, or a coherent color palette built from a single base color, these tools let you tune values visually and copy production-ready CSS in one click.
All output is plain CSS — no proprietary syntax, no framework lock-in. The Color Palette Generator also exports as Tailwind config or a CSS variables block, so designs flow into your codebase without manual translation. Every preview updates at 60 fps as you drag a slider, so iteration feels like a native design tool, not a configuration form.
Frequently asked questions
Can I export Tailwind classes from the design tools?+
Yes — the Gradient Generator emits a Tailwind arbitrary-value class alongside the plain CSS, and the Color Palette Generator exports as a tailwind.config theme block.
Are the previews accurate?+
Yes. Each preview is rendered with the actual CSS the tool generates, so what you see is exactly what you will get when you paste the snippet into your project.
Can I save my generated configurations?+
Configurations are not yet persisted across sessions, but you can copy the CSS and paste it into your codebase as soon as you have it looking right. Shareable URL state is on the roadmap.