A CSS gradient generator with draggable colour stops
The Gradient Generator lets you design linear, radial and conic gradients visually and copy the exact CSS. Drag colour stops along the bar, click the bar to add a stop, set each stop’s colour, position and opacity, and turn the angle dial — the preview and the code update instantly.
It is built for web designers and developers who want a hero background, a button, a card header or a mesh-like glow without hand-writing linear-gradient() syntax. You can also download the gradient as a PNG at any size, handy for app splash screens, social media backgrounds, presentation slides or wallpapers.
How to use the Gradient Generator
- Pick a preset from the “Presets” menu or start with the default violet-to-cyan gradient.
- Click a round handle on the colour-stop bar to select it, then change its “Stop colour”, drag the “Position” slider (or drag the handle itself) and lower “Opacity” for a fade.
- Click anywhere on the bar, or press “Add stop”, to insert a new colour stop; “Remove stop” deletes the selected one.
- Choose a type: Linear with an angle, Radial with a circle or ellipse shape, or Conic with a starting angle. Drag the dial or type the angle.
- Press “Copy CSS” to paste the code into your stylesheet, or set a width and height and press “Download PNG”.
Gradient Generator features
Linear, radial and conic
All three CSS gradient functions with the options that matter: angle, circle or ellipse, and the conic start angle.
Draggable stops with alpha
Move stops by dragging, keyboard arrows or the slider. Each stop keeps its own opacity, written as 8-digit HEX in the CSS.
Angle dial
Turn the dial with a mouse or finger, or focus it and use the arrow keys (Shift for 15° steps). Type an exact value in the box.
Twelve presets
Popular starting points — sunset, ocean, aurora, a fade to transparent, a rainbow conic and a radial spotlight.
Copy-ready CSS and Tailwind
The CSS includes a solid fallback colour. A Tailwind arbitrary-value class such as bg-[linear-gradient(…)] is generated too.
PNG export at any size
Render the gradient up to 8000 × 8000 px with the same angle maths as CSS, entirely on your device.
CSS gradient syntax explained
linear-gradient(135deg, #8C6BFF 0%, #36E3FF 100%) paints a straight blend. The angle follows the CSS convention: 0deg points up, 90deg points right and 180deg points down, turning clockwise. Each colour stop is a colour followed by its position along the gradient line.
radial-gradient(circle, …) starts at the centre and spreads outwards; “ellipse” stretches with the element. conic-gradient(from 90deg, …) sweeps around the centre like a pie chart, which is how colour wheels and progress rings are made.
Browsers blend stops in sRGB by default, so a transition between two saturated hues can pass through a dull grey. If you need smoother blends in modern browsers, add an interpolation hint such as linear-gradient(in oklch 90deg, red, blue); this generator keeps to the sRGB syntax that works everywhere.
Tips for gradients that look professional
- Keep hues close together (within about 60° on the wheel) or go through a shared mid-tone. Pick matching colours in the Color Palette Generator.
- Use a lighter and a darker shade of the same colour for subtle depth — the Color Shades Generator gives you a ready scale.
- Place text over gradients only where the contrast holds up at both ends; verify with the Contrast Checker.
- For glass cards, pair a soft gradient with the blur from the Glassmorphism Generator.
- Avoid banding on large areas by adding a middle stop or keeping lightness differences modest.
Gradient PNG sizes for common uses
| Use | Size (px) |
|---|---|
| Full-HD wallpaper / slide background | 1920 × 1080 |
| 4K wallpaper | 3840 × 2160 |
| Phone wallpaper | 1170 × 2532 |
| Instagram post | 1080 × 1080 |
| Open Graph / Twitter card | 1200 × 630 |
| YouTube thumbnail | 1280 × 720 |
Gradient Generator FAQ
How do I make a CSS gradient background?
Design it here, press “Copy CSS” and paste the two background lines into your selector, for example body { background: #8C6BFF; background: linear-gradient(135deg, #8C6BFF 0%, #36E3FF 100%); }. The first line is a fallback for very old browsers.
How do I add a transparent fade to a gradient?
Select a stop and lower its “Opacity” slider. The colour is written as 8-digit HEX such as #8C6BFF00, which every modern browser understands. The “Fade to transparent” preset is a ready example.
What angle should I use for a diagonal gradient?
135deg runs from the top-left corner to the bottom-right, 45deg from bottom-left to top-right. 90deg is left to right and 180deg top to bottom.
Can I use the gradient generator with Tailwind CSS?
Yes. Copy the generated arbitrary-value class, for example bg-[linear-gradient(135deg,_#8C6BFF_0%,_#36E3FF_100%)]. Underscores stand for spaces in Tailwind arbitrary values.
Why does the downloaded PNG look slightly different from the preview?
The preview is drawn on a 16:9-ish box, while the PNG uses the width and height you type. With linear gradients the same angle covers a different diagonal when the aspect ratio changes, exactly as it would in CSS.
Is the gradient image created on your server?
No. The PNG is rendered by your browser’s canvas and saved straight to your device; nothing is uploaded.