Gradient generator
Runs entirely in your browser. Your files and data never leave your device.
About this tool
A gradient generator lets you build a CSS gradient by eye instead of guessing angles and stop positions. Pick linear, radial, or conic, add or remove color stops, and adjust each stop’s color and position while a large preview box updates instantly.
What’s the difference between the three gradient types?
A linear gradient blends colors along a straight line, and you control its direction with an angle slider, so 90 degrees runs left to right and 180 runs top to bottom. A radial gradient blends outward from a center point, and here you choose between a circle (equal spread in all directions) or an ellipse (stretched to match the shape’s box). A conic gradient sweeps colors around a center point like a color wheel or a pie chart, and it also takes an angle to set where the sweep starts. Each type accepts any number of color stops, and every stop has both a color and a position from 0 to 100 percent, so you can bunch several colors close together or spread them evenly.
Can I start from an existing look instead of building from scratch?
Yes. The tool ships with a small set of presets, such as a warm two-color “Sunset” linear gradient, a radial “Deep Space” blend, and a full “Rainbow Wheel” conic gradient, and picking one loads it into the editor so you can tweak the colors, stops, or angle from there instead of starting blank. Whatever you build, the output line is the exact CSS you’d write by hand, like linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), ready to paste into a stylesheet.
Does anything I design get uploaded?
No. Building and previewing the gradient happens entirely in your browser, so nothing you design leaves your machine. That makes it fine to prototype a client’s brand gradient or an internal product’s background before it ships anywhere.
Use it to get the background: linear-gradient(...) line for a hero section, a radial glow behind a card, or a conic gradient for a progress ring or color wheel. See the MDN gradient reference for the full syntax of linear-gradient(), radial-gradient(), and conic-gradient().