Free Design & CSS Tools
Visual CSS without the trial-and-error: generate harmonious palettes with Tailwind-ready shade scales, compose linear/radial/conic gradients visually, and pick from animated spinners that export as plain CSS or React components.
CSS Spinner Generator
Build animated loading spinners and export as CSS or React
Pick from 10 animated loading spinner styles — Ring, Dots, Wave Bars, Ripple, Flip, and more. Customize color, speed, size, and stroke weight, then copy the CSS or a ready-to-use React component.
Color Palette Generator
Generate harmonious color palettes from any seed color
Pick a seed color and instantly generate complementary, analogous, triadic, tetradic, split-complementary, or monochromatic palettes. Includes a Tailwind-style 11-step shade scale. Export as CSS custom properties, Tailwind config, or JSON.
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually
Build linear, radial, and conic CSS gradients with a visual editor. Multiple color stops, angle control, and 12 presets. Export as CSS, Tailwind arbitrary value class, React inline style, or SCSS variable.
🎯 Start from one color
Give the palette generator your brand color and let color theory (complementary, triadic, analogous) do the rest — then export the 11-step scale straight into your Tailwind config.
🌗 Check both themes
A gradient that sings on white can vanish on #0b0b0f. Preview against both backgrounds before shipping.
♿ Respect reduced motion
Spinner exports include a prefers-reduced-motion guard — keep it. Vestibular-safe animation is a feature, not a nicety.
FAQ
Can I export palettes for Tailwind?
Yes — as a Tailwind config snippet with an 11-step shade scale (50–950), as CSS custom properties, or as JSON.
Which gradient types are supported?
Linear, radial, and conic, with unlimited color stops, angle control, and export as CSS, a Tailwind arbitrary-value class, a React inline style, or SCSS.
Do the spinners need JavaScript?
No — every spinner is pure CSS animation. The React export is just a convenience wrapper around the same CSS.
Are these tools really client-side?
Fully. Color math, gradient rendering, and spinner previews all run in your browser.