Free CSS Gradient Generator
Create beautiful CSS gradients visually. Pick colors, adjust angle, choose linear or radial, and copy the generated CSS. Includes preset gradients for quick inspiration. No signup required.
100% free — no account needed
background: linear-gradient(135deg, #6366f1, #ec4899);Presets
Free CSS Gradient Generator Features
Visual gradient builder with live preview
Copy CSS
One-click copy of the generated CSS background property.
6 Preset Gradients
Start with beautiful presets like Sunset, Ocean, Forest, Lavender, Cherry, and Midnight.
Randomize
Generate random gradient combinations for inspiration.
Linear & Radial
Toggle between linear and radial gradient types with adjustable angle.
FAQ
What's the difference between linear and radial?
Linear gradients transition in a straight line at a specified angle. Radial gradients transition outward from a center point in a circular or elliptical pattern.
Can I use more than 2 colors?
This tool supports 2-color gradients. For multi-stop gradients, use the generated CSS as a starting point and add color stops manually.
Do CSS gradients work in all browsers?
Yes. CSS gradients have excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge.
Create Branded Visuals
Use custom gradients in your social media graphics with AdaptlyPost.