Lush CSS Gradient Generator

Generate lush non-muddy gradients with stop timeline, HCL/LAB spaces and 2D Bezier curve.

Colors & Stops:

Selected Color:

Pos:50%

Quick Palette:

Color Space Mode:

Interpolation Steps13 stops

Angle:45deg

Easing Curve:0.10, 1.00

Format:

.gradient {
  background-image: linear-gradient(
    45deg,
    #001188 0%,
    #4b038c 8%,
    #98008d 17%,
    #e20080 25%,
    #ff3064 33%,
    #ff6644 42%,
    #ff892b 50%,
    #ffa216 58%,
    #ffb404 67%,
    #ffbf00 75%,
    #ffc700 83%,
    #ffcb00 92%,
    #ffcc00 100%
  );
}