CSS Gradient Generator

How to build a gradient

1. Pick your two colors with the swatches. The preview strip repaints instantly.
2. Choose Linear or Radial. Linear shows an angle slider from 0 to 360 degrees; radial is always a centered circle, so the slider hides itself.
3. Drag the angle until the preview looks right. 135 degrees, the default, runs top-left to bottom-right, which is the angle most hero sections use.
4. Click Copy CSS and paste the one-line rule into your stylesheet.

A worked example

The page opens with blue #2547F4 flowing into amber #FFB224 at 135 degrees, and the CSS box reads:

background: linear-gradient(135deg, #2547f4, #ffb224);

Paste that onto a header element and you have the exact gradient in the preview, at any element size, because gradients are resolution-independent. Want a spotlight effect for a card instead? Switch the type to Radial and the rule becomes background: radial-gradient(circle, #2547f4, #ffb224);, with color 1 at the center fading outward to color 2 at the edges. The preview is an ordinary div styled with the same rule you copy, so what you see is literally what you ship, not a canvas approximation of it.

Why CSS gradients beat image files

A gradient rule is a few dozen bytes of text that the browser rasterizes on the GPU at exactly the size and pixel density needed. The old alternative, exporting a gradient as a JPEG or PNG background, costs a network request, looks banded after compression, and blurs on high-density screens. The generated syntax here is plain, unprefixed CSS supported by every browser you still care about. One tip from using gradients in production: if your two colors sit on opposite sides of the color wheel, like this blue and amber, the midpoint can pass through a slightly grey zone. The fix is adding a third stop; take the copied rule and insert a mid color, for example linear-gradient(135deg, #2547f4, #b76dcf 50%, #ffb224), and the transition livens up. The tool keeps the interface at two stops, but the output is ordinary CSS you can extend by hand exactly like that.

Honest limitations

Two color stops, no more, in the interface itself; complex multi-stop gradients need hand-editing after copying, as shown above. Radial gradients are fixed to a centered circle, with no ellipse option and no position control, and there is no conic gradient type at all, so color wheels and pie effects are out of scope. There is no opacity control either, since the swatch inputs produce solid HEX colors; for a transparent fade, replace one color in the copied CSS with an rgba() or #RRGGBBAA value. And nothing is saved between visits, so paste the CSS somewhere before closing the tab if you spent real time finding the right pair.