CSS Gradient Generator
Build a linear or radial CSS gradient with a visual color-stop editor and copy the CSS.
How this tool works
Choose linear or radial
Linear gradients get a full 0-360 degree angle control; radial expands outward from the center.
Add and position color stops
Click the gradient bar to add a stop, then drag any stop to reposition it precisely.
Fine-tune each color
Use the color picker or type a hex value directly for any stop.
Copy the CSS
Grab the finished background declaration, ready to paste into a stylesheet.
Quick facts
- Category
- Generators
- Best for
- Building a gradient background without hand-tuning color-stop percentages
About this tool
Build a CSS gradient visually instead of hand-tuning color-stop percentages in a stylesheet: add or remove color stops, drag each one along the gradient bar to reposition it, and switch between linear (with a full 0-360 degree angle control) and radial gradients, all with a live preview swatch updating as you go. Once it looks right, copy the finished background declaration directly - a full linear-gradient() or radial-gradient() rule, ready to paste into CSS. This pairs naturally with the hex/RGB converter for picking exact color values ahead of time, and with the color palette generator when you need a coordinated set of stops rather than two arbitrary colors. Runs entirely client-side, so nothing about your design work is ever sent anywhere.
Why use this tool
Drag instead of guessing percentages
Position stops visually on the gradient bar rather than hand-editing numbers and reloading to check.
Linear and radial in one tool
Switch gradient types without starting over - your color stops carry across both modes.
Live preview swatch
See the actual rendered gradient update in real time as you add stops or adjust the angle.
Pairs with our color tools
Pick exact values with the hex/RGB converter or a coordinated set with the color palette generator first.
Frequently asked questions
A linear gradient transitions along a straight line at a chosen angle - 90 degrees goes left to right, 0 degrees goes bottom to top - and is the more common choice for backgrounds and buttons. A radial gradient instead expands outward in a circle from the center point, which reads more like a glow or spotlight effect than a directional wash of color.
Drag the stop directly on the gradient bar for quick visual positioning, or read its exact percentage next to the color swatch below the bar - the position updates live as you drag, so you can fine-tune by eye and confirm the number at the same time.
Yes - click anywhere on the gradient bar to add a new stop at that position, with its own independent color and percentage. There’s no fixed limit on how many stops a gradient can have, though CSS gradients get harder to read past four or five stops.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools