Linear, Radial, and Conic, All Three Gradient Types
Writing gradient CSS by hand is a lot of trial and error. You tweak an angle, reload, adjust a color stop position, reload again. This tool shows a live preview as you adjust, with the CSS code updating alongside it. When it looks right, copy the code. Done.
It covers all three CSS gradient types. Linear for straight-line flows. Radial for circular expansions from a center point. Conic for color wheel effects that sweep around a center. Plus there are presets, Sunset, Ocean, Forest, Fire, Aurora, Rainbow, that you can use as starting points and customize from there.
Building a Gradient
Start from a preset or from scratch. Pick your gradient type, adjust the angle (linear and conic) or shape (radial), and set up your color stops, anywhere from 2 to 5 stops, each with its own color and position. The preview updates in real time. When you’re happy with it, the output is clean, standard CSS ready to paste into your stylesheet.
The “Aurora” preset, for example, gives you a multi-stop gradient with greens, blues, and purples. Change it from linear to conic and you get a color wheel effect. Swap in your brand colors, adjust the stop positions, and you’ve got something unique in about 30 seconds.
The Conic Gradient Angle
Most people haven’t used conic gradients because they’re newer and less intuitive. They sweep colors around a center point like hands on a clock, instead of flowing left-to-right or inside-out, the transition happens angularly. That makes them perfect for progress indicators (think circular loading bars), pie-chart-style visuals, and actual color wheels, all in pure CSS with no JavaScript.
Browser support is solid now: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. That covers about 95% of users. For the remaining 5%, a linear gradient fallback works fine.
Design Tips
When your gradient between two complementary colors looks muddy in the middle, add a third color stop halfway through to control the transition. Blue-to-orange with a coral midpoint looks much better than blue-to-orange with the default brownish muddle.
Use the Color Picker for precise stop colors, the Palette Generator for finding colors that harmonize with each other, and the basic Gradient Generator when you just need a simple two-color blend. Tailwind users can apply the generated CSS via arbitrary values or inline styles.
Everything runs in your browser, nothing gets sent anywhere.