Gradient Generator.

Design smooth, multi-color gradients with real-time CSS generation. Animated, linear, radial, or conic.

Keyboard Shortcuts:

SPACERandomize

ARROWSRotate

linear90°2 Stops

Code Format



.gradient {
  background: linear-gradient(90deg, #4456ff 0%, #160095 100%);
}

Gradient TypeAngle — 90deg

090180270360

Animation

Color Stops

100%

Presets