CSS Gradient Generator

Create linear, radial, and conic gradients. Copy CSS or download an image.

All color tools
125°
Peach Nirvana
0%
100%

1600 × 1000 px

Select a color stop to edit it. Drag its marker or use the Position slider.

Color blending & transition
Transition
Import a gradient

2–10 stops with percentage positions, CSS colors, and transparency. Conic stops also accept angles. Use a single, non-repeating gradient with sRGB, linear-light, or OKLab interpolation. Curved CSS exports include a comment that restores your editable stops when pasted back here. Keep that comment, or save JSON.

Start from an image

Convert a gradient image into editable color stops. Photos produce a simplified linear gradient.

JPG, PNG or WebP, up to 12 MB. Your image stays on your device.

Adjust all colors
0°
0
0

Saturation and lightness change by percentage points. Stop positions and transparency stay the same.

CSS and image settingsbackground: linear-gradient(125deg, rgb(234 177 138 / 100%) 0%, rgb(205 131 171 / 100%) 50%, rgb(140 120 186 / 100%) 100%);

The preview uses this aspect ratio. Transparent areas stay transparent in downloaded images.

Saved work (0)

Save your first gradient above. Its colors and settings will be ready to reopen.

Saved on this device with its settings. Download a project to keep a backup or import it on another device.

How to create a CSS gradient
  1. Start with a preset in CSS Gradient Generator or import a CSS gradient. Choose Linear for a transition along a direction, Radial for a transition spreading from a center, or Conic for colors rotating around a center.
  2. Select a color stop to change its color, position, or opacity. Drag its marker, use arrow keys, or select its numbered button. Add up to ten stops; closer stops make a shorter transition between colors.
  3. Adjust the angle for a linear gradient or move the center for a radial or conic gradient. Radial gradients also offer circle and ellipse shapes and different reach settings. Adjust all colors previews hue, saturation, and lightness changes together.
  4. To approximate an image as a gradient, open Import a gradient and choose a file. Compare the original with the linear-gradient approximation before applying it. Images are processed in your browser.
  5. Copy CSS to use the generated background declaration in a stylesheet. Open CSS and image settings to set image dimensions and download PNG, SVG, CSS, or project JSON. Conic gradients support PNG, CSS, and JSON. PNG and SVG exports preserve transparent areas.
  6. Save the gradient to retain its stops, opacity, geometry, and image dimensions. Undo and Redo compare edits; project JSON lets you back up and reopen the editable design.

Use a linear gradient for a directional background or a radial gradient with an off-center highlight. For a web background, copy the CSS; for a fixed graphic, download an image at the intended size. Check any overlaid text against the lightest and darkest areas it crosses.