Can I add and remove color stops?

Yes. Add a color stop between existing stops, edit its position, or remove a stop while keeping at least two. The application supports up to eight.

Which colors and angles are supported?

Opaque six-digit HEX colors and linear angles from 0 to 360 degrees. Alpha colors, conic gradients and elliptical radial controls are not offered.

Build linear or radial CSS gradients with editable stops.

Gradient type

Angle (0–360°)

Two to eight opaque HEX stops, in increasing position order. Equal positions create a hard edge.

Stop 1

Stop 1 color (HEX)

Position (%)

Stop 2

Stop 2 color (HEX)

Position (%)

background: linear-gradient(135deg, #0070f3 0%, #00c6ff 100%);

Design Tools Local processing

Edit two to eight HEX colors and positions, preview the gradient and copy its CSS.

Use Linear for a direction or Radial for a centered circle.

Use two to eight six-digit HEX colors and positions from 0 to 100%. Keep positions in increasing order; equal positions create a hard edge.

Use the current preview and copy the background declaration. Correct invalid colors, positions or angles first.

Inputs are processed in your browser. Analytics and advertising can make separate network requests.

Can I add and remove color stops?: Yes. Add a color stop between existing stops, edit its position, or remove a stop while keeping at least two. The application supports up to eight.
Which colors and angles are supported?: Opaque six-digit HEX colors and linear angles from 0 to 360 degrees. Alpha colors, conic gradients and elliptical radial controls are not offered.