Gradient Builder

Design a gradient

Add color stops, choose their colors and positions, and adjust the angle. The preview updates immediately while you work.

Interactive tool

Build your own gradient

ResetAngle°

Preview

01Color for stop 1#4d9cffPosition for stop 1%×

02Color for stop 2#8b5cf6Position for stop 2%×

03Color for stop 3#ec4899Position for stop 3%×

Add color stopCopy CSS

background: linear-gradient(90deg, #4d9cff 0%, #8b5cf6 50%, #ec4899 100%);

Use your gradient

Copy the generated CSS and paste it into a stylesheet or design prototype. Everything runs locally in your browser.