Create linear, radial and conic CSS gradients visually. Copy the CSS or download as PNG — free and 100% in your browser.
background: linear-gradient(135deg, #1C5C52 0%, #DFF3E5 100%);NinjaFunction's CSS Gradient Generator lets you design linear, radial and conic gradients with multiple color stops and a live preview. Copy the ready-to-use CSS declaration, download the gradient as a PNG, or start from a preset. Everything runs locally — nothing is uploaded.
50% and 50%) create a sharp line instead of a soft blend.background: declaration ready to paste.CSS gradients let you create smooth transitions between two or more colors without any image files. They scale perfectly to any size, are GPU-accelerated, and are supported in every modern browser.
A linear gradient transitions colors along a straight line. You control the direction with an angle in degrees (0° = bottom to top, 90° = left to right).
A radial gradient transitions colors outward from a center point. You can control the shape (circle or ellipse) and size. Great for spotlight and glow effects.
A conic gradient sweeps colors around a center point like a pie chart. Useful for color wheels, progress indicators, and radial patterns.
| Type | How it looks | Good for |
|---|---|---|
| Linear | Colours blend along a straight line | Backgrounds, buttons and banners |
| Radial | Colours spread out from a centre point | Spotlights, glows and soft shadows |
| Conic | Colours sweep around a centre like a clock | Pie charts and colour wheels |
Copy the declaration and paste it as the background of any element, such as a section, a button or the body. Add a plain background colour just before it as a fallback for the rare browser that does not support gradients. Modern browsers all support linear and radial gradients, and conic gradients work in current versions of Chrome, Edge, Firefox and Safari.
Linear and radial gradients are universally supported. Conic gradients are supported in all modern browsers (Chrome 69+, Safari 12.1+, Firefox 83+).
Yes — the generated CSS is yours. Gradients are simple CSS declarations, not copyrighted assets.
No. Everything runs locally in your browser. Your colors, angle, and stops never leave your device.
A linear gradient blends colours along a straight line at the angle you choose, such as 90deg for left to right. A radial gradient spreads out from a centre point in a circle or ellipse. A conic gradient sweeps the colours around a centre point like the hands of a clock, which is useful for pie-chart and colour-wheel effects.
A gradient needs at least two stops, so the remove button is turned off when only two are left. You can add more stops to build multi-colour gradients, and move each one to set where its colour sits along the gradient.
Banding shows up when two similar colours are stretched across a large area, especially dark blues and greys. Add a middle stop, choose colours that are a little further apart, or keep the gradient to a smaller element.