CSS Gradient Generator
Build linear or radial CSS gradients with a live preview and copyable CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css gradient generator
- Select "Linear" or "Radial" using the Gradient type toggle.
- Choose Color 1 and Color 2 with the color picker or type a hex value like #6366f1.
- For linear mode, drag the Angle slider (0–360°) to set the gradient direction.
- For radial mode, choose "Circle" or "Ellipse" from the Shape dropdown.
- Press Randomize to try a random color pair, then click Copy to grab the CSS one-liner.
About this css gradient generator
The CSS gradient generator produces a ready-to-paste `background` declaration using either `linear-gradient()` or `radial-gradient()`. Pick your two colors, adjust direction or shape, and the live preview updates instantly — no page reload, no trial and error in your code editor.
For linear gradients the tool follows the CSS convention directly: it writes `linear-gradient(angle, color1, color2)`. The angle uses the CSS spec's clock-face system, where 0deg sweeps bottom-to-top, 90deg goes left-to-right, and 180deg goes top-to-bottom. Drag the slider anywhere in between to land on a diagonal. For radial gradients the output becomes `radial-gradient(shape, color1, color2)`, where shape is either "circle" (same radius in every direction) or "ellipse" (stretches to fill the element's box). The Randomize button generates two cryptographically random hex values — handy when you want a surprise starting point before refining.
As a concrete example: switch to Linear, set Color 1 to #6366f1 (indigo) and Color 2 to #ec4899 (pink), then drag the Angle slider to 135. The tool outputs `background: linear-gradient(135deg, #6366f1, #ec4899);` — a diagonal sweep from the top-left indigo corner down to the bottom-right in pink. Hit Copy and paste that single line directly into any CSS rule or a Tailwind `style` prop.
Everything runs in your browser with nothing sent to a server, so your color choices stay private.
FAQ
- What is the difference between a linear and radial gradient in the CSS gradient generator?
- A linear gradient blends colors along a straight line at a chosen angle. A radial gradient radiates outward from a central point in either a circular or elliptical pattern. Both produce a valid CSS `background` value.
- What does the angle number mean for a linear gradient?
- The angle follows the CSS spec: 0deg runs bottom-to-top, 90deg runs left-to-right, 180deg runs top-to-bottom, and 270deg runs right-to-left. Values outside 0–360 wrap around, but the slider is capped at 360.
- Why does the tool use hex codes rather than named CSS colors?
- Hex codes (e.g. #6366f1) map precisely to a single RGB value and are accepted everywhere CSS is valid. Named colors like "rebeccapurple" are less portable and restrict the color space to around 140 named values.
- Can I add more than two color stops?
- This tool supports exactly two stops — a start color and an end color. For multi-stop gradients, copy the output and extend it manually in your editor, e.g. `linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899)`.
- What format does the Copy button produce?
- It copies a single CSS declaration: `background: <gradient-value>;`. Paste it into any CSS rule or inline style and it works immediately with no extra processing.
- Does this tool store or transmit my color choices?
- No. The gradient generator runs entirely in your browser. No data is sent to a server and nothing is saved between sessions.