Create flowing gradients and take the CSS with you.
Enter a valid HEX color.
1600 × 1000 px
Select a color stop to edit it. Drag its marker or use the Position slider.
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 interpolation.
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
Saturation and lightness change by percentage points. Stop positions and transparency stay the same.
CSS and image settings
background: linear-gradient(125deg, rgb(234 177 138 / 100%) 0%, rgb(205 131 171 / 100%) 50%, rgb(140 120 186 / 100%) 100%);Use whole numbers from 16 to 4096 pixels.
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.
Shape a gradient one stop at a time
- Start with a preset or import an existing CSS gradient. To work from an image, open Import a gradient, choose a file, and compare the original with its linear-gradient approximation before choosing Use this gradient. Images are processed in your browser.
- Select a stop to change its color, position or opacity. Drag markers, use arrow keys, or choose a stop from the numbered color buttons. Add up to ten stops.
- Open Adjust all colors to preview changes to hue, saturation and lightness, then apply them together. Reverse the color order or use Undo and Redo to compare changes.
- Move a radial or conic center directly on the preview, with arrow keys, or with the center sliders. Radial gradients offer circle/ellipse shapes and four reach settings.
- Open CSS and image settings to choose a preset size or dimensions from 16 to 4096 pixels. The preview keeps the same aspect ratio as the image.
- Copy CSS or download PNG, SVG, CSS or a complete JSON project. Conic gradients support PNG, CSS and JSON. Transparent areas stay transparent in image exports.
- Save a named gradient with all colors, positions, opacity, geometry and image dimensions. Reopen it from Saved work, or download and import a project backup.
Try a radial gradient with its center near a corner, then compare a landscape and portrait image before downloading.