Create beautiful gradients and copy the CSS
Click the code to copy
Create beautiful CSS linear and radial gradients with live preview. Copy CSS code instantly. Free online design tool. This tool runs entirely in your browser — no data is sent to any server. It's fast, free, and works on any device.
CSS gradients create smooth color transitions without image files — meaning zero HTTP requests, infinite scalability, and tiny file size. Linear gradients flow in a direction (top to bottom, diagonal, any angle), radial gradients emanate from a center point (circles and ellipses), and conic gradients sweep around a center (like a color wheel or pie chart). Gradients can have unlimited color stops, creating complex multi-color effects. They're used for backgrounds, overlays on images, button effects, progress bars, and decorative elements. Modern design trends heavily use gradients — from Stripe's signature purple-blue to Instagram's logo gradient. This generator provides visual control over all gradient parameters with real-time preview and outputs clean CSS with fallback prefixes.
Linear: colors flow in a straight line (any direction). Radial: colors emanate from a center point outward. Conic: colors sweep around a center point like a clock. Each creates distinct visual effects.
Use rgba colors with alpha: rgba(0,0,0,0) to rgba(0,0,0,0.8) creates a black overlay that fades from transparent to dark. Perfect for text readability over images.
Not directly with border, but use border-image: linear-gradient(...) 1, or the popular technique: background with gradient + a slightly smaller inner element (padding + background-clip trick).
Unlimited. However, each stop adds complexity. 2-4 stops cover most design needs. Complex gradients with 10+ stops can create rainbow effects, mesh gradients, and noise textures.
CSS gradients are GPU-rendered and very performant — far better than image backgrounds. Even complex gradients render in microseconds. They're one of the most efficient decorative CSS features available.