background: linear-gradient(135deg, #c88b5a 0%, #d18b54 8.3%, #da8c4e 16.7%, #e38b46 25%, #ec8b3f 33.3%, #f68b36 41.7%, #ff8a2b 50%, #ff9624 58.3%, #ffa21f 66.7%, #ffae20 75%, #ffba27 83.3%, #ffc632 91.7%, #ffd23f 100%);
background: linear-gradient(135deg in oklch, #c88b5a 0%, #ff8a2b 50%, #ffd23f 100%);

The first line is a pre-mixed copy for older browsers; current Chrome, Edge, Safari and Firefox use the second.

Colors

Tap the bar to add a color, drag the dots to move them.

Color

Pick stop color

Position

%

Shape

LinearRadialConic

Angle

135°

Blending

Mix colors in

OKLCHOKLabsRGB

Stays vivid between colors. The modern default.

Long way roundTravels the other way round the color wheel, through every hue in between.Smooth easingSoftens where colors meet, so there’s no visible line.

Image

Size

Format

PNGJPGWebP

Lossless and band-free. The biggest files.

Grain

Off

Film-like noise for a printed, textured look. Images are always lightly dithered so they don’t band.

Loading Gradient generator…

Gradient generator

Smooth gradients exported as CSS or PNG.

Presets

CSS

background: linear-gradient(135deg, #c88b5a 0%, #d18b54 8.3%, #da8c4e 16.7%, #e38b46 25%, #ec8b3f 33.3%, #f68b36 41.7%, #ff8a2b 50%, #ff9624 58.3%, #ffa21f 66.7%, #ffae20 75%, #ffba27 83.3%, #ffc632 91.7%, #ffd23f 100%);
background: linear-gradient(135deg in oklch, #c88b5a 0%, #ff8a2b 50%, #ffd23f 100%);