CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually with copy-ready code.
How to use the CSS Gradient Generator
Step 1 — Choose a type
- Pick linear, radial, or conic.
Step 2 — Set colour stops
- Edit each stop colour and position; add or remove stops as needed.
Step 3 — Adjust direction
- Use the angle slider for linear and conic gradients.
Step 4 — Copy the CSS
- Grab the generated background property and paste it into your stylesheet.
Frequently asked questions
Linear (a straight directional blend), radial (blending outward from a centre), and conic (sweeping around a centre like a colour wheel). You switch type with one control.
Each stop is a colour pinned to a position from 0% to 100%. The browser blends smoothly between adjacent stops. Add as many as you like; drag each position to control where the transition happens.
For linear gradients the angle sets the direction of the blend — 0deg points up, 90deg points right. For conic gradients it sets where the colour sweep starts. Radial gradients ignore the angle.
Yes. It outputs a standard background property using modern gradient syntax that every current browser supports. Paste it straight into your stylesheet.
Copy the CSS and keep it; the gradient is fully described by that one line, so pasting it back into any project reproduces it exactly.
About the CSS Gradient Generator
This tool lets you design a CSS gradient visually and copy the exact code to use in your project. You see the result update live as you change the type, the colours, their positions, and the angle, so you can dial in precisely the look you want without writing gradient syntax by hand.
The three kinds of gradient
CSS offers three gradient functions and this tool covers all of them. A linear gradient blends colours along a straight line in a direction you set with an angle, which is the workhorse for backgrounds, buttons, and hero sections. A radial gradient blends outward from a centre point in rings, useful for spotlights, glows, and soft vignettes. A conic gradient sweeps the colours around a centre like the face of a colour wheel, which is how people build pie-chart looks, colour pickers, and loading spinners in pure CSS. Switching between them here is a single control, and the preview re-renders instantly.
Colour stops and direction
The heart of any gradient is its colour stops. Each stop is a colour anchored to a position between 0% and 100%, and the browser interpolates smoothly between neighbouring stops. Two stops give a simple fade; adding more lets you build rich multi-colour blends, and moving a stop position controls exactly where one colour gives way to the next — placing two stops close together creates a hard edge, spreading them out creates a gentle wash. For linear and conic gradients the angle sets direction: 0 degrees points upward and 90 degrees points to the right, following the CSS convention. You can add or remove stops freely, try the built-in presets, or generate a random blend for inspiration.
Using the output
The generated code is a standard background declaration using the modern gradient syntax supported by every current browser, so it is ready to paste straight into your stylesheet or an inline style. Because a gradient is fully described by that single line, copying it is all you need to save or reuse it anywhere. Everything is generated locally in your browser. To convert or fine-tune the individual colours you use here, see the Color Code Converter, and to ensure text over a gradient stays readable, check the Color Contrast Checker.