A gradient is a smooth transition between two or more colours across a shape, and CSS supports three distinct gradient types that behave differently. Linear gradients travel in a straight line at an angle you control. Radial gradients spread outward from a centre point in circles or ellipses. Conic gradients sweep colour around a centre point like a colour wheel or a pie chart, which none of the older gradient syntaxes could express before conic-gradient was added to CSS.
Every stop, every angle and every generated line of CSS is computed locally in your browser as you drag, with nothing sent to a server.
Linear, radial and conic gradients compared with a css gradient generator
Linear gradients are the most common choice for backgrounds, buttons and overlays because a straight directional transition reads as clean and intentional at almost any angle. The angle is measured in degrees, where 0 degrees points to the top, 90 to the right, 180 to the bottom and 270 to the left, following the same convention as a clock face rotated to start at 12.
Radial gradients suit effects that should draw the eye toward a centre point, such as a spotlight effect, a glow behind an icon, or a soft vignette at the edge of a card. Conic gradients are the natural choice for anything that needs to represent a full rotation, colour wheels, pie charts, loading spinners and angular progress indicators are all built from a conic gradient under the hood.
- Use linear for backgrounds, buttons, banners and most directional overlays.
- Use radial for spotlights, glows, vignettes and soft highlight effects behind content.
- Use conic for colour wheels, pie charts, angular progress rings and loading spinners.
- Combine several gradients as comma separated layers for effects no single gradient type can produce alone.
Working with multiple gradient color stops
Every gradient type accepts two or more gradient color stops, each with its own colour and its own position along the gradient, expressed as a percentage from 0 to 100. Two stops produce a simple transition, while three or more let you build effects such as a colour that peaks in the middle before fading back out, or a hard edge between two flat colours by placing two stops at the identical position.
Stop position is independent of stop order in the sense that you can place stops anywhere along the 0 to 100 range, but CSS requires each stop's position to be equal to or greater than the one before it, so this generator keeps stops sorted automatically as you add or move them to avoid producing invalid CSS that a browser would silently misinterpret.
Setting the angle for a linear gradient generator
The angle control on this linear gradient generator runs the full 0 to 360 degree range using the CSS angle convention, not the mathematical convention, so 0 degrees is straight up and the angle increases clockwise. Common values are worth knowing by heart: 90 degrees for left to right, 180 for top to bottom, and 135 for the diagonal top left to bottom right direction used in a large share of real world gradient backgrounds.
CSS also accepts directional keywords such as to right or to bottom right instead of a numeric angle, which this tool exposes as preset buttons for the eight most common directions, each of which maps to an exact angle behind the scenes.
How radial gradient css positioning works
Radial gradient css positioning is controlled by a shape, either circle or ellipse, and a position for the centre point, which defaults to the middle of the element but can be moved toward any edge or corner. An ellipse stretches to match the aspect ratio of its container by default, while a circle stays perfectly round regardless of the container's shape, which matters when the gradient needs to look identical on a square icon and a wide banner.
The size keyword controls how far the gradient extends before reaching its final colour stop, with closest-side and farthest-corner being the two most commonly used values, and this generator exposes both alongside a fixed pixel size option for cases where the gradient needs to stay a constant size regardless of the element it is applied to.
How this css gradient generator works under the hood
The tool assembles a CSS image value string directly from your stop list, angle, shape and position settings, following the exact syntax the CSS Images specification defines for each gradient function. No canvas rendering or image generation happens, the preview panel is styled with the identical CSS string you copy, so there is never a mismatch between what you see and what ships.
Because the output is plain CSS text, it works anywhere CSS accepts a background image, including as an inline style, a CSS custom property, or a class in an external stylesheet, with no build step or preprocessing required.
| Type | Function | Typical use |
|---|---|---|
| Linear | linear-gradient() | Backgrounds, buttons, directional overlays |
| Radial | radial-gradient() | Spotlights, glows, vignettes |
| Conic | conic-gradient() | Colour wheels, pie charts, progress rings |
How to use a css gradient generator
- 1
Choose a gradient type
Pick linear, radial or conic depending on the effect you need.
- 2
Add and position colour stops
Add two or more stops, set each colour and drag its position along the 0 to 100 percent range.
- 3
Set the angle or shape
For linear gradients set the angle in degrees. For radial and conic gradients set the shape and centre position.
- 4
Copy the generated CSS
Copy the finished background declaration and paste it directly into your stylesheet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the css gradient generator.
135 degrees produces a diagonal running from the top left corner to the bottom right, which is the most common diagonal direction used in real interfaces. 45 degrees produces the opposite diagonal, from bottom left to top right. Both read as more dynamic than a straight vertical or horizontal gradient while still looking intentional.
CSS itself has no hard limit on the number of stops in a single gradient, and this tool supports adding as many as you need, though most effective gradients use two to four stops. Beyond around five or six stops a gradient usually starts to look busy rather than smooth, unless you are deliberately building a striped or banded effect.
A radial gradient spreads outward from a centre point in expanding circles or ellipses, so colour changes as you move away from the centre. A conic gradient sweeps colour around a centre point like the hands of a clock, so colour changes as you move around the centre at a fixed distance rather than away from it, which is what makes conic gradients suitable for pie charts and colour wheels.
Yes. CSS allows the background-image property to accept a comma separated list of gradients, layered on top of each other with the first one listed on top. This generator focuses on producing one gradient at a time, but the resulting CSS can be combined with additional gradients by hand using a comma.
Every browser released in the last several years supports conic-gradient, including all current versions of Chrome, Firefox, Safari and Edge. If you specifically need to support very old browser versions, a linear or radial gradient is the safer fallback, since conic-gradient arrived in browsers noticeably later than the other two gradient types.
Not really, a conic gradient generator works the same way as any other gradient tool, you still add colour stops and set a centre position, the only real difference is that stop position is measured as an angle around the centre rather than a straight line distance. Once that mental shift clicks, building a conic gradient is no harder than building a linear one.
Visible banding usually comes from stops that are too far apart in both colour and position, which the browser then interpolates across a wide area, making the individual bands of the rendering pipeline visible. Adding intermediate stops with closer colour values, or moving existing stops nearer to each other, produces a smoother visual transition.