CSS Gradient Generator

What this does

A visual editor for CSS linear-gradient() and radial-gradient(). You add colour stops, drag the numbers around, watch a live 200px preview update, and copy out a single background declaration. Nothing is compiled or uploaded — the preview is your own browser rendering the same CSS string it hands you.

background: linear-gradient(135deg, #c45a3a 0%, #f3eee2 100%);

How do I make a CSS gradient?

1. Pick Linear or Radial. The controls to the right change with it.
2. For linear, set the angle in degrees (0–360). For radial, choose circle or ellipse.
3. Edit the two default stops: colour swatch, hex field, and a position from 0 to 100.
4. Hit + Add stop for more. New stops clone the last colour and sit 10% further along.
5. Copy the CSS and paste it as the background of any element.

Which way does the angle point?

CSS gradient angles describe the direction the gradient travels toward, measured clockwise from straight up. So 0deg runs bottom to top, 90deg left to right, 180deg top to bottom, and the default 135deg goes from the top-left corner down to the bottom-right — the usual choice for a hero panel.

What is the difference between circle and ellipse?

Both radiate outward from the element's centre; this tool always emits at center. circle keeps the colour rings perfectly round, so on a wide box the corners fall outside the last stop. ellipse stretches the rings to the element's aspect ratio, which is why it is the CSS default and the default here.

Why did my stops get reordered?

The generator sorts stops by position before writing the string, so a row order of 100%, 0%, 50% comes out as red 0%, green 50%, blue 100%. That is deliberate: CSS treats an out-of-order stop as clamped to the previous one, which silently flattens part of your gradient. Sorting means the preview and the copied CSS always agree.

How do I get a hard edge instead of a fade?

Give two adjacent stops the same position. #000 50%, #fff 50% produces a crisp split with no blend at all — useful for two-tone backgrounds, stripes, and progress bars. Repeat the trick at several positions and set background-size to tile the result into a striped pattern.

Can I add a third colour, or use conic gradients?

Extra colours, yes — add as many stops as you like; the remove button stays disabled at two since a gradient needs at least a pair. Conic gradients are not covered here. Nor are colour-space hints like in oklch, which newer browsers accept inside the gradient function if you want a smoother midpoint; add that by hand after copying.

Where does this fit with the other CSS tools?

Build a colour set first with palette generator or tweak individual values in colour converter, then check text legibility over the result with contrast checker. For softer multi-point blends try mesh gradient, and glassmorphism if the gradient is sitting behind a frosted card.