Create beautiful CSS linear and radial gradients visually. Copy the CSS code instantly.
The CSS Gradient Generator lets you build beautiful linear, radial, and conic gradients through a visual interface and instantly outputs production-ready CSS - including vendor-prefixed fallbacks. Add as many color stops as you need, adjust their positions freely, and see the gradient update live in the preview panel. Copy the CSS with one click and paste it straight into your stylesheet.
A linear gradient transitions colors along a straight line at a specified angle - the most common type for backgrounds and hero sections. A radial gradient radiates colors outward from a center point in an elliptical or circular pattern, useful for spotlight effects and vignettes. A conic gradient sweeps colors around a center point like a color wheel or pie chart, which is ideal for decorative elements and data visualizations. All three are native CSS and require no images or external libraries.
Linear and radial gradients have had near-universal browser support since 2013 and work in Chrome, Firefox, Safari, and Edge without any prefixes. Conic gradients are supported in Chrome 69+, Firefox 83+, and Safari 12.1+, covering over 95% of global browser usage as of 2024. The tool outputs clean, unprefixed CSS because -webkit- prefixed gradient syntax was only necessary for browsers that reached end-of-life years ago. If you specifically need to support very old mobile browsers, you can add a solid color fallback property before the gradient declaration.
Color stops are positioned as percentages along the gradient axis - a stop at 0% is the start, 100% is the end, and intermediate stops interpolate smoothly between them. To create a hard, sharp transition with no blend between two colors, place two stops at the exact same position (for example, red at 50% and blue at 50%) - the browser will switch colors with no interpolation, which is useful for striped patterns and flag-style designs. You can add as many stops as needed to create complex multi-color transitions.
Yes - any color stop supports transparency by using RGBA, HSLA, or CSS color keywords with an alpha value. A common pattern is fading from a solid brand color to transparent for overlay effects on top of photographs. When blending between two semi-transparent colors, browsers interpolate both the color and alpha channels simultaneously, which can produce unexpected gray midpoints - if this happens, using oklch() or lch() color spaces (supported in Chrome 111+ and Safari 15.4+) produces perceptually smoother transitions.
Design tools like Figma and Adobe XD have excellent visual gradient editors, but they output gradient definitions in their own proprietary formats that you still need to manually translate into CSS. This tool outputs production-ready CSS directly, skipping the translation step and eliminating transcription errors. It is especially useful for developers who think in code first or who need to quickly adjust an existing CSS gradient - paste the current value back in, tweak it visually, and copy the updated declaration.