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.
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.
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.