CSS Gradient Generator

Create refined linear and radial gradients with editable color stops, hue, opacity, and ready-to-copy CSS.

Live

LinearRadial

Mode Angle (deg) Global Opacity: 1.00

Single Stop Track (click empty area to add stop)

0%50%100%

Select a stop to edit it in the panel on the right. Minimum 2 stops.

Stop 1

25.0% share

Stop 2

50.0% share

Stop 3

25.0% share

Stop Color (click to pick)

Gradient

Hue Shift (selected stop): 0deg Stop Opacity: 1.00

RGBA

HEX

background: linear-gradient(120deg, rgba(45, 155, 219, 1.000) 0%, rgba(86, 203, 242, 1.000) 50%, rgba(188, 107, 217, 1.000) 100%);