CSS Gradient Generator
Choose a gradient type (linear or radial), then adjust the angle or shape and each color stop (color and position %) — the preview and the generated CSS update instantly. You can add or remove between 2 and 6 color stops; clicking "Add color stop" inserts a new stop in the middle of the largest gap between existing stops. The generated background declaration can be copied to the clipboard with one click. To convert color code formats, also try the Color Converter.
🔒 Runs in your browser · Your data is never sent to a server
Color stops
You can have between 2 and 6 color stops.
Preview
Notes
- Color stops are automatically sorted by position (ascending) before being output, even if you enter overlapping or out-of-order positions.
- A linear gradient's angle follows the CSS angle convention (0deg points up, 90deg points right, 180deg points down).
- A radial gradient is always generated centered on the element (the default). To offset the center, add "at ..." after the shape in the generated `radial-gradient(...)` yourself.
- The generated CSS targets the `background` property. If you need to layer it with an image, use `background-image` instead.
Glossary
Gradient
A smooth transition between two or more colors. In CSS, it is drawn by giving a property such as `background` a `linear-gradient()` or `radial-gradient()` function.
linear-gradient
A gradient whose colors change in a straight line along a given angle, e.g. `linear-gradient(90deg, color1 0%, color2 100%)` — an angle plus a list of color stops.
radial-gradient
A gradient that spreads outward from a center point in a circle or ellipse, e.g. `radial-gradient(circle, color1 0%, color2 100%)` — a shape plus a list of color stops.
Color stop
A point in a gradient that says "place this color at this position." Positions are given as a percentage (0% to 100%), and the color smoothly blends between consecutive stops.
FAQ
Which direction does the linear gradient angle refer to?
It follows the CSS specification: 0° runs from bottom to top, 90° from left to right, and 180° from top to bottom.
How many color stops can I add?
You can have 2 to 6 stops. A new stop is inserted at the midpoint of the widest gap, and stops are automatically sorted by position in the output.
How can I move the center of a radial gradient?
The tool always outputs a centered gradient. To shift it, append something like "at 30% 40%" after the shape in the generated radial-gradient(...).
Share this page