CSS Gradient Generator

CSS Gradient Generator lets you build all three CSS gradient types — linear, radial, and conic — with a visual editor and live preview. The tool generates the exact background CSS property value you need, ready to paste.

Start from one of the 12 built-in presets or build your own from scratch. Add up to 8 colour stops, pick any colour with the native colour picker, and drag the position slider to place each stop precisely along the 0–100% range. The gradient preview updates instantly as you adjust every parameter.

Use the type tabs to switch between gradient types at any time — your colour stops are preserved across type changes so you can compare the same palette in linear, radial, and conic forms.

• Presets — click any preset chip in the bar above the tool to instantly load a colour palette with its default type and angle. Great starting points.
• Type tabs — switch between Linear, Radial, and Conic. Each type reveals its own set of controls below the tabs.
• Linear — Direction — click a compass button to set a preset angle, or drag the slider for any angle from 0° to 359°. The direction grid center always shows the current angle.
• Radial — Shape & Size — choose circle or ellipse, then control how far the gradient extends (closest-side, farthest-corner, etc.). The X/Y sliders set the radial center position.
• Conic — From & Position — set the starting angle of the sweep and the position of the cone's apex with the X/Y sliders.
• Colour stops — click the colour swatch to open the native picker; drag the slider to reposition a stop. The gradient preview bar above the list always reflects the sorted stop order. Remove stops with ×; add new ones with the + button (auto-placed in the largest gap, blending between neighbours).
• Click Copy CSS to copy the ready-to-use .element { background: ... } rule.

All three gradient functions produce an image value that can be used anywhere an image is accepted — most commonly as a background or background-image.

• linear-gradient(angle, stop1, stop2, …) — draws a colour transition along a straight line defined by the angle. 0deg runs bottom-to-top; 90deg runs left-to-right. Stops are positioned as percentages of the gradient line length.
• radial-gradient(shape size at x y, stop1, stop2, …) — emanates from a central point outward as concentric ellipses or circles. The size keyword controls how far the gradient extends relative to the element edges (e.g., farthest-corner means 100% of the gradient line reaches the furthest corner from the center).
• conic-gradient(from angle at x y, stop1, stop2, …) — rotates around a center point. Colour stops are positioned along an angular sweep (0–360°) rather than a linear or radial axis. Useful for pie charts and colour wheels.

Colour stops can overlap or have hard edges: placing two stops at the same position (e.g., #f00 50%, #00f 50%) creates a sharp colour boundary with no blending — used in the Pie preset.