CSS Gradient Generator
Design beautiful linear, radial and conic CSS gradients with a live preview and copy the code in one click
Live preview
Gradient type
Color stops
Presets
CSS code
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Everything is generated locally in your browser. Nothing is sent to a server.
About this tool
This CSS gradient generator lets you design smooth color blends visually and copy ready-to-paste CSS in one click. Choose a linear, radial or conic gradient, add as many color stops as you like, and fine-tune each stop's color with a native color picker or HEX field plus a position from 0 to 100 percent. For linear gradients you can set any angle from 0 to 360 degrees or use the quick direction buttons; radial gradients support circle or ellipse shapes, and conic gradients sweep colors around a center point. A large live preview updates instantly so you see exactly what you build. Start from one of the curated presets, hit the random button for fresh ideas, then copy the generated background property into your stylesheet. Everything runs locally in your browser, so it is fast, private and works offline.
How to use
- 1 Pick a gradient type - linear, radial or conic.
- 2 Add color stops, then set each stop's color (picker or HEX) and its position from 0 to 100%.
- 3 Adjust the angle for linear and conic gradients, or the shape for radial ones - or load a preset.
- 4 Watch the live preview, then click Copy CSS to paste the background property into your project.
How it works
The tool composes a standard CSS gradient function from your settings. Linear gradients use linear-gradient(angle, stops), where the angle points the gradient line and each color stop is written as a color followed by a percentage position. Radial gradients use radial-gradient(shape at center, stops) to spread colors outward from the middle, and conic gradients use conic-gradient(from angle at center, stops) to rotate colors around a point. Color stops are automatically sorted by position before output, so the order you add them in does not matter. Positions are clamped to 0-100% and at least two stops are always kept, so the generated CSS is always valid. The result is a plain background declaration you can drop into any modern browser without prefixes.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line whose direction you set with an angle. A radial gradient spreads colors outward from a center point in a circle or ellipse. A conic gradient rotates colors around a center point, which is handy for pie charts, color wheels and angular effects. All three are native CSS and supported by every modern browser.
How many color stops can I add?
You can add as many color stops as you need; the tool always keeps a minimum of two so the gradient stays valid. Each stop has its own color and a position from 0 to 100 percent. Adding more stops lets you create rainbows, multi-tone backgrounds and smooth multi-color transitions.
What does the angle control do?
For a linear gradient the angle sets the direction of the color line: 0 degrees points up, 90 to the right, 180 down and 270 to the left, so you can aim the blend anywhere. For a conic gradient the angle sets the starting rotation of the sweep. You can drag the slider, type an exact value, or use the quick direction buttons.
Is the generated CSS ready to use in production?
Yes. The output is a standard background property using native gradient functions that work in all current browsers without vendor prefixes. Just copy the line and paste it into your stylesheet, inline style or component. You can change the property name to background-image if you prefer to keep a separate background color.
Is my data sent anywhere?
No. The entire generator runs in your browser using JavaScript and CSS. Nothing about your colors or gradients is uploaded or stored on a server, so the tool is private and keeps working even if you disconnect from the internet.
Related tools and uses
Pair the gradient generator with the color converter to pick exact HEX, RGB and HSL values, and the contrast checker to make sure text stays readable over your gradient. Designers and developers use it to create hero backgrounds, buttons, cards, badges and decorative effects for websites and apps.