Create linear, radial, or conic gradients with full control
Beautiful preset gradients to start with — Sunset, Ocean, Aurora & more
Up to 8 color stops, angle control, position sliders for each stop
One-click copy of production-ready CSS code for your project
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Choose a gradient type (linear, radial, or conic), set the angle, add color stops with the + button, and adjust each stop's color and position. The preview updates in real-time. When you're happy with the result, click "Copy CSS" to get the code.
You can create three types: Linear gradients (colors flow in a straight line at any angle), Radial gradients (colors radiate from a center point outward), and Conic gradients (colors rotate around a center point). Each type has its own controls.
You can add up to 8 color stops per gradient. Each stop has a customizable color and position (0-100%). You always need at least 2 color stops for a gradient.
Yes! Click the "Copy CSS" button to copy the full CSS background property to your clipboard. Paste it directly into your stylesheet. The generated code works in all modern browsers.
We include 10 beautiful gradient presets: Sunset, Ocean, Forest, Fire, Aurora, Berry, Night, Candy, Peach, and Rainbow. Click any preset to instantly apply it, then customize further.
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Linear and radial gradients have near-universal support. Conic gradients are supported in all browsers released after 2020.
Absolutely. The CSS code generated is standard CSS that you can use in any project — personal, commercial, or open source. No attribution required.
Explore more free tools to boost your productivity