CSS Gradient Generator

Create beautiful CSS gradients with live preview.

CSS Gradient Generator builds copy-ready background declarations with a live preview box that updates on every control change. Choose Linear or Radial type; in Linear mode an Angle slider (0–360°, readout "{n}°") controls direction, while Radial emits a fixed circle shape with no angle. The Colors section holds up to ten stops — each with a native color picker and a hex text input kept in sync — plus "Add Color" (appends #ffffff) and per-color × removal that hides at the two-color minimum.

The "CSS Output" pane shows the complete declaration (background: linear-gradient(…);) rather than a bare gradient function, so you can paste it straight into a stylesheet. "Copy CSS" flips to "Copied!" with toast "Copied to clipboard!"; the tenth color is blocked with "Maximum 10 colors allowed". String builders live in lib/cssGradient.ts — no network, no dependencies.

How it works

generateLinearGradient emits linear-gradient({angle}deg, {colors.join(', ')}); generateRadialGradient emits radial-gradient(circle, {colors…}); generateCssBlock wraps either as background: {gradient};. The page recomputes via useMemo on type, colors, and angle, painting the same string into the preview div (h-48, style background: gradient) and the output pane.

State (type, angle, colors) lives in cssGradientSlice with starter defaults. handleAddColor enforces the 10-color cap (toast "Maximum 10 colors allowed"); the remove button renders only when colors.length > 2, guaranteeing a valid two-stop minimum. Only 'linear' | 'radial' exist — there is no conic mode. All pure string building — nothing is uploaded.

How to use

Watch the live preview box — it updates as you tweak any control.
Select Type: Linear or Radial (the Angle slider only shows for Linear).
Drag Angle 0–360° (readout shows "{n}°").
Edit colors: pick via the color input or type hex in the text field.
"Add Color" appends #ffffff (blocked past 10 with toast "Maximum 10 colors allowed").
Remove colors with × (only shown when more than 2 remain).
Read "CSS Output" (background: …;) and click "Copy CSS" (toast "Copied to clipboard!").

Tips

Output is a ready-to-paste background: declaration, not just the gradient function — drop it straight into CSS.
Radial mode ignores the angle (circle shape only), so switching types hides the slider.
Minimum 2 colors is enforced by hiding the remove button when colors.length <= 2.
Hex text inputs stay in sync with the native color picker — either side drives the other.
Ten-color cap keeps gradients manageable; the toast fires before an eleventh stop is added.