CSS Gradient Generator

CSS Gradient Generator lets you build a gradient by hand instead of guessing at code. Pick linear, radial or conic, click the stop bar to add colours, drag them into place, and the large preview updates as you move. When it looks right, copy the CSS, copy a Tailwind class, or download the gradient as a PNG at the exact size you need for a wallpaper, a social post or a slide background.

It goes further than most free gradient makers. Colours can blend in OKLCH, a newer colour space that keeps the middle of a gradient bright instead of turning muddy grey, and the tool writes a fallback line that reproduces the same blend with extra stops for older browsers. Stops can be see-through, gradients can repeat into stripes, and radial and conic gradients have a centre you can drag anywhere on the preview.

Twelve presets give you a starting point, from soft sunrise blends to candy stripes and a conic pinwheel, and the Random button suggests fresh combinations in harmonious colours. Every control works with a mouse, a finger or the keyboard. Nothing is uploaded: the CSS and the image are made in your browser, and your last gradient is remembered on your own device.

1. Choose “Linear”, “Radial” or “Conic”, or start from one of the presets at the bottom.
2. Click the colour stop bar to add a stop, drag handles to move them, and drag one down off the bar to remove it.
3. With a stop selected, change its colour, opacity and position in the boxes under the bar.
4. Turn the angle dial for linear and conic gradients, or drag the centre dot on the preview for radial and conic ones.
5. Press “Copy CSS” or “Copy Tailwind class”, or pick a size and press “Download PNG”.

• Linear, radial (circle or ellipse, four size options) and conic gradients, each with a repeating version for stripes and rings.
• A stop bar where you add, drag, recolour and delete stops, with any number of stops and an opacity for each.
• OKLCH or classic sRGB blending, with an automatic fallback line so OKLCH gradients look the same in older browsers.
• An angle dial that snaps to 15° steps when you hold Shift, plus a number box for exact angles.
• A draggable centre point for radial and conic gradients.
• Reverse and Spread evenly buttons to tidy the stops in one tap.
• Copy as plain CSS or as a Tailwind CSS arbitrary value such as bg-[linear-gradient(…)].
• PNG download at common sizes (HD, 4K, square and portrait posts, phone wallpaper, link preview) or any custom size up to 8000 pixels, with the preview reshaped to match.
• Twelve hand-made presets and a Random button.

• If the middle of a blue-to-yellow or red-to-green gradient looks grey, switch to OKLCH. It keeps colours lively all the way across.
• For hard stripes, put two stops at the same position. The Candy stripes preset shows how: each colour ends exactly where the next begins.
• Hold Shift while turning the dial to land on 0°, 45°, 90° and the other common angles.
• Very large PNGs, such as 8000 × 8000, use a lot of memory. If a phone struggles, choose a smaller size; gradients scale up smoothly anyway.
• Every handle is keyboard friendly: Tab to a stop, use the arrow keys to move it (Shift for bigger steps) and press Delete to remove it.