Gradient

CSS gradient generator

Drag stops, tune the angle and copy ready-to-paste CSS gradient code.

Type

Angle 135°

Color stops

Copy the CSS above and add the .gradient class to your element. .gradient-fallback is a solid-color fallback for older browsers.

Generate harmonious palettes from color theory, lock and export.

Fine-tune with sliders and read every format plus full scales.

76 curated palettes filtered by style and hue.

📘

The gradient generator builds linear / radial / conic CSS gradients visually, with multiple stops and live preview, ready to paste into your project.

Pick a gradient type, then click the bar to add stops (up to 8) and drag to adjust position and angle — 90° is horizontal.
Click a stop to recolor it; use the delete control to remove stops. The CSS shows live on the right.
Export the gradient as a PNG when you need a flat asset; it works on mobile too.

💡

Use at least 2 stops; drag a stop to change angle and position (90° is horizontal).
Click a stop to recolor; add/remove stops (up to 8) with the + / × buttons.
Paste the CSS directly into your project, or export a PNG if you need a solid block.