CSS Gradient Generator

CSS gradient generator for linear, radial and conic backgrounds

The page opens with a three-color gradient and its CSS already written in the output boxes. Change one stop and both boxes follow at once. This CSS gradient generator covers the three gradient functions of the browser, linear-gradient(), radial-gradient() and conic-gradient(), plus the repeating- variant of each.

Five steps from first stop to copied rule

1. Pick Linear, Radial or Conic. Linear takes an angle from 0 to 360 degrees. Radial takes a shape, circle or ellipse, and a center. Conic takes a start angle and a center.
2. Edit the color stops. Every stop has a color picker, a hex field, a position in percent and an alpha from 0 to 100. The arrow buttons move a stop, the cross removes it, and Add stop appends a new one.
3. Press Evenly space to spread the stops from 0 to 100, or Reverse stops to flip the gradient. A preset fills the whole editor if you prefer to start from an example.
4. Check the large preview. It sits on a checkerboard, so transparent parts show.
5. Press Copy above the box you need.

Hard edges, stripes and stops out of order

Two stops at the same position make a hard edge instead of a blend. The Stripes preset uses this: dark and amber bands of 10% each, repeated because the repeating switch is on and the last stop sits at 20%. That last position is the length of one repeat. Move it to 100% and the repeat disappears.

The tool never sorts your stops. If a stop sits before an earlier one, the browser lifts it to the earlier position, which creates another hard edge. The positions you type are limited to 0 to 100.

What the two output boxes contain

The first box holds one line, background: ...;. The second holds two lines: a background-color equal to the first stop, and a background-image with the gradient. The color is the fallback for a browser that cannot parse the gradient. Opaque stops are written as #rrggbb. A stop with alpha below 100 becomes rgb(0 0 255 / 50%). Radial and conic gradients write the center as at 50% 50%. No size keyword is written, so the browser default farthest-corner applies.

What the generator does not do

Colors are hex only: #rgb or #rrggbb. Color names, hsl() and eight-digit hex are not read, and a bad value shows an error while the last valid color stays. There is one gradient layer, no list of backgrounds, no color hints between stops and no custom radial size. A gradient has 2 to 8 stops.

Nothing leaves the tab

The preview is set with a style property on a page element. No request is sent when you edit or copy, and nothing is stored, so a reload brings back the starting gradient. The copy buttons write to your clipboard. There is no file download.

Frequently asked questions (FAQ)