Advertisement
Guide
About the CSS Gradient Generator
CSS gradients let you paint smooth color transitions as backgrounds without any image files — which means they're resolution-independent, tiny in file size, and easy to tweak. This generator builds linear, radial, and conic gradients visually: add color stops, drag their positions, set the angle or center, and copy the exact CSS.
A live preview shows the result as you go, and presets give you attractive starting points. Everything runs in your browser and the output is standard CSS you can paste straight into a stylesheet.
Linear, radial, and conic — what each does
- Linear — colors blend along a straight line at an angle you choose. The most common type, great for backgrounds and buttons.
- Radial — colors radiate outward from a center point, useful for spotlights and soft glows.
- Conic — colors sweep around a center like a color wheel, handy for pie-chart effects and unique backgrounds.
Color stops and smooth blends
Each color in a gradient is a stop with a position. Adding more stops and adjusting their positions controls where colors sit and how sharp or gradual the blend is. Placing two stops at the same position creates a hard edge — useful for stripes. Experiment with stop positions to get the exact transition you want.
How to use it
- 1Choose linear, radial, or conic.
- 2Add color stops and set their colors and positions.
- 3Adjust the angle or center to aim the gradient.
- 4Copy the generated CSS into your background property.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
Linear blends colors along a straight line, radial spreads them outward from a center, and conic sweeps them around a center point like a color wheel.
How do I control where colors appear?
Each color is a stop with a position from 0% to 100%. Move the stops to decide where each color sits and how gradual the transition is.
Can I make a hard-edged stripe instead of a blend?
Yes. Place two color stops at the same position so the colors meet with no blend, which produces a crisp edge.
Do CSS gradients hurt performance?
No. They are drawn by the browser and use no image files, so they are lightweight and scale to any resolution.
Is the CSS generated locally?
Yes. The gradient and its CSS are produced entirely in your browser.