Gradient Generator
Build a CSS gradient visually and copy the code - free, no signup.
What this tool does
Choose linear or radial, pick 2 to 5 color stops, and adjust the angle (for a linear gradient) to see a live preview update instantly alongside the exact CSS background property to paste into your stylesheet.
Builds a linear or radial CSS gradient from 2 to 5 color stops you pick visually.
Lets you set the angle for a linear gradient with a live-updating slider.
Generates the exact, ready-to-paste CSS background property for the result.
Live preview box updates instantly as you change the type, any color stop, or the angle, staying in sync with the CSS text.
Copy button copies the full CSS background declaration line, ready to paste straight into a stylesheet.
How to use it
- Choose Linear or Radial.
- Pick your color stops, and adjust the angle if using a linear gradient.
- Copy the generated CSS.
Why use this generator
CSS gradients need exact syntax and angles, and tuning by trial in code is slow. Previewing and copying the property saves iterations.
Why we built it
We built the gradient generator with up to five colour stops and both linear and radial types, generating live CSS. Style further with the CSS snippet generator and choose colours with the colour picker.
Who this tool is for
- Web designers writing CSS backgrounds
- Developers who need quick gradient code
- Presentation designers
When to use it
- Backgrounds for sections and buttons.
- Experimenting with colours.
- Getting CSS to paste.
- Learning gradient syntax.
Linear vs radial - which to use
Direction of the color transition is the whole difference.
A linear gradient transitions colors along a straight line at whatever angle you set - 0° runs bottom to top, 90° runs left to right, and so on - making it the natural choice for backgrounds, buttons, and anything with a directional feel. A radial gradient transitions colors outward from a centre point in a circle instead, which suits spotlight effects, glowing accents, or a softer, centred look that a straight linear transition can't produce.
Exactly what CSS gets generated
The output is a single background declaration - here's precisely what's in it.
For a linear gradient, the tool outputs `background: linear-gradient(<angle>deg, stop1, stop2, ...);` using whatever angle the slider is set to and every color stop in order. For a radial gradient, it outputs `background: radial-gradient(circle, stop1, stop2, ...);` - the shape is always fixed to circle, centered on the element, with no ellipse option and no explicit position or size keyword.
You can hold between 2 and 5 color stops. The "Add color stop" button appends a new white (#ffffff) stop you then recolor, and any stop can be removed as long as at least 2 remain. None of the stops carry an explicit percentage position in the generated CSS, so the browser spaces them evenly by default - matching what most simple gradients need without extra syntax.
The angle control only appears for linear gradients - it's hidden entirely when radial is selected, since this tool's radial gradients always start from the center rather than at an angle.
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | Two to five colour stops, type and angle. |
| Output | A live preview and a CSS background property. |
| Options | Linear or radial. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Banding appears | A subtle gradient on a large area. | Add noise or more contrast. |
| Stops are evenly spaced | Positions are not editable. | Edit positions in CSS. |
| Conic or repeating gradient needed | Not supported. | Write it by hand. |
Assumptions and limitations
- This generates simple 2-to-5-stop gradients; it doesn't support more advanced CSS gradient features like explicit stop positions, conic gradients, or repeating gradients.
- Color stops are evenly spaced by default, matching what most CSS gradient use cases need without further adjustment.
Frequently asked questions
How do I make a CSS gradient online for free?
Choose linear or radial, pick your colors, adjust the angle if needed, and the CSS is generated instantly - copy it straight into your stylesheet.
What is the difference between a linear and radial gradient?
A linear gradient transitions along a straight line at a chosen angle; a radial gradient transitions outward from a centre point in a circle instead.
How many colors can I use in one gradient?
Up to 5 color stops, which covers the vast majority of real-world gradient designs without becoming visually cluttered.
Can I control where each color stop sits, not just its color?
Not in this tool - stops are evenly spaced, which is the standard default and covers most use cases; for precise stop positioning, you'd need to edit the generated CSS by hand.
Is my data uploaded anywhere?
No. The gradient is built entirely in your browser - nothing is sent to a server.
What angle should I use for a top-to-bottom gradient?
180°. Matching the CSS spec, 0° runs bottom-to-top, 90° runs left-to-right, 180° runs top-to-bottom, and 270° runs right-to-left.
Does the radial gradient support ellipse shapes or custom positioning?
No - the radial option always generates radial-gradient(circle, ...), a circular gradient centered on the element. For an ellipse shape or an off-center gradient, you'd add that to the generated CSS by hand.