CSS Gradient Generator

Create beautiful linear, radial, and conic gradients visually. Copy CSS instantly.

🔒 100% client-side

Gradient Type

About CSS Gradient Generator

CSS Gradient Generator lets you create beautiful linear, radial, and conic gradients visually — then copy the ready-to-use CSS in one click. Add as many color stops as you need, adjust positions and angles, and pick from curated presets for instant inspiration. Everything happens in your browser with zero uploads and zero tracking.

Direction

deg

Color Stops

CSS Output

Presets — click to apply

CSS Gradient Reference

linear-gradient(angle, stop1, stop2, …) — Transitions along a straight line. Angle 0° is top→bottom, 90° is left→right, 135° is diagonal.

radial-gradient(shape at pos, stop1, stop2, …) — Radiates outward from a center point. Shape is circle or ellipse.

conic-gradient(from angle, stop1, stop2, …) — Rotates around a center point like a pie chart. Great for spinners and charts.

Color stop positions — Each stop can have an explicit position: #ff0000 0%, #0000ff 100%. Multiple stops at the same position create a hard edge.

Tip: Use background-image instead of background if you also want a fallback background-color for older browsers.