Build Gradients Visually, Copy the CSS
Tweaking gradient angles and color stop percentages in a text editor is miserable. Change a number, save, reload, squint at the screen, change another number, repeat. The feedback loop is glacially slow.
This tool gives you a live preview. Pick colors, drag the stops along the bar, spin the angle dial, and watch the gradient update in real time. When it looks right, copy the CSS and paste it into your stylesheet. The whole process takes maybe 30 seconds instead of 10 minutes of guess-and-check.
Don’t feel like starting from scratch? Hit one of the named presets (Indigo Pop, Sunset, Color Wheel, Aurora Ring, and more) to load a finished gradient, then tweak from there. Each preset swatch shows you exactly what you’re about to load.
Linear, Radial, and Conic
Linear gradients flow in a straight line, set the angle from 0 to 360 degrees to control the direction. A 135-degree angle from deep blue (#1a1a2e) to vibrant purple (#6c63ff) creates that modern diagonal sweep that’s everywhere right now. The CSS: background: linear-gradient(135deg, #1a1a2e 0%, #6c63ff 100%).
Radial gradients expand from a center point outward in a circle. Good for spotlight effects, button sheens, and those subtle background glows behind cards.
Conic gradients sweep colors around a center point like a clock hand, which is what you want for color wheels, pie-chart fills, and progress rings. Set the starting angle with the same dial the linear mode uses. Loop back to the first color at 100% and the wheel closes seamlessly.
You can use 2 to 8 color stops, each with its own color and position percentage. Two stops give you a simple blend. Three or more let you create complex transitions with precise control over where each color begins and ends. Need just one stop’s hex? There’s a Copy hex button right in the stop editor.
Making Gradients That Don’t Look Bad
Honestly, most gradient mistakes come from picking colors that are too far apart on the color wheel. Red-to-green gradients go through a muddy brown in the middle. Blue-to-orange has the same problem. Colors that are adjacent on the wheel (blue to purple, orange to yellow) transition smoothly and look intentional.
If you need a gradient between complementary colors, add a third stop in the middle to control the transition path. A red-to-green gradient with a bright yellow at 50% looks dramatically better than the default muddle.
For transparent gradients, like a fade-to-transparent overlay on a hero image, set one of the stops to a transparent color using rgba().
Where This Gets Used
Hero section backgrounds. Gradient buttons that stand out from flat UI elements. Card backgrounds with subtle depth. Image overlays that darken the bottom of a photo so white text stays readable. Brand backgrounds that tie into the company’s color palette.
The output is standard CSS that works everywhere, vanilla, Tailwind (via arbitrary values), SCSS, styled-components, any framework. Linear, radial, and conic all generate clean one-line declarations. Want more layered control, multiple stacked gradients, or extra presets to browse? The CSS Gradient Generator goes deeper. The Color Picker helps find precise colors for your stops. Everything runs in your browser.