CSS Gradient Generator
Build linear & radial CSS gradients visually.
100% private — runs in your browser, nothing is uploaded.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);How to use the CSS Gradient Generator
- 1Choose a gradient type
Switch between linear and radial.
- 2Add and color your stops
Set each color and drag its position along the gradient.
- 3Set the angle
For linear gradients, rotate the direction with the angle slider.
- 4Copy the CSS
Grab the background property and paste it into your stylesheet.
Free online CSS gradient generator
This CSS gradient generator lets you design linear and radial gradients visually and copy production-ready CSS. Add as many color stops as you like, position them with sliders, spin the angle, and watch the live preview update instantly.
Linear vs radial gradients
A linear gradient transitions between colors along a straight line — perfect for headers, buttons and full-page backgrounds. A radial gradient radiates outward from a center point, giving soft glows, spotlights and depth. Toggle between the two to compare which suits your design.
Working with color stops
Color stops are the heart of a gradient. Each one is a color pinned to a position from 0% to 100%. Two stops give a simple two-color blend; adding more lets you build vibrant, multi-color transitions. Placing two stops close together creates a sharp band, while spreading them out gives a gentle fade.
Ready-to-use, no prefixes
The output uses standard, unprefixed CSS that works in every modern browser. Just copy the background line into your stylesheet or inline style — no build step, no libraries, no -webkit- prefixes required.
Frequently Asked Questions
How do I create a CSS gradient?
Pick linear or radial, choose your colors as stops, and set the angle for a linear gradient. The tool writes the CSS for you — copy the background property straight into your stylesheet.
What is the difference between a linear and radial gradient?
A linear gradient blends colors along a straight line at a chosen angle. A radial gradient blends outward in a circle from the center, which is useful for spotlights, buttons and soft background glows.
How do color stops work?
Each stop is a color placed at a percentage position from 0% to 100%. The browser blends smoothly between stops. Add more stops for multi-color gradients, and drag the position sliders to control where each color sits.
How do I control the gradient direction?
For a linear gradient, the angle slider sets the direction: 0° points up, 90° points right, 180° points down. Adjust it live and watch the preview rotate.
Can I use these gradients as a background?
Yes. Copy the generated background property onto any element. Gradients are supported in every modern browser and work great for hero sections, cards, buttons and overlays.
Do I need vendor prefixes like -webkit-?
No. Unprefixed linear-gradient and radial-gradient are supported by all current browsers, so the clean CSS this tool outputs is all you need.