Free Online CSS Gradient Generator
Create linear and radial CSS gradients visually with live preview
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Try these next
About this tool
Design beautiful CSS gradients visually with this free online CSS gradient generator. Choose between linear and radial gradient types, customize color stops with native color pickers, adjust stop positions with sliders, and add up to five colors for multi-step gradients. For linear gradients, drag an angle slider from 0 to 360 degrees — 0 is bottom to top, 90 is left to right, 180 is top to bottom. For radial gradients, toggle between circle and ellipse shapes. A large live preview updates instantly as you change any setting, so you see exactly how your gradient will look. The CSS output is displayed in a code block with a one-click copy button, ready to paste into your stylesheet. Jump-start your design with four built-in presets: Sunset, Ocean, Mint, and Purple Haze. All CSS generated follows the modern standard using the background property, compatible with all current browsers. No sign-up, no downloads — just open the tool, design, and copy.
Frequently Asked Questions
The syntax is: background: linear-gradient(angle, color-stop1 position1, color-stop2 position2). For example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). The angle is measured clockwise from a line pointing upward — 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom, 270deg is right to left. You can use any CSS color value for stops: hex, rgb, hsl, or named colors.
A linear gradient transitions colors along a straight line at a given angle. A radial gradient transitions colors outward from a central point in a circle or ellipse shape. Use linear gradients for diagonal background washes, button fills, and text gradients. Use radial gradients for spotlight effects, vignettes, and circular highlights.
The CSS specification supports an unlimited number of color stops. In practice, 2-5 stops produce clean, visually appealing results. More than 5 stops can look muddy unless the colors are carefully chosen. This tool supports up to 5 stops, which covers the vast majority of real-world design use cases.
No. CSS gradients have been supported without vendor prefixes in all modern browsers since 2014. The -webkit- prefix was required for Chrome and Safari before version 26, but no current browser version needs it. If you need to support very old browsers (pre-2014), add a -webkit-prefixed version as a fallback line before the standard property.
Yes, using the background-clip technique: set background to your gradient, then add background-clip: text and -webkit-background-clip: text (for Safari), and set color: transparent. This clips the gradient to the text shape. Currently the -webkit- prefix is still required for Safari support, even though Chrome and Firefox support the unprefixed property.
Related Tools
Discover more free utilities to enhance your productivity.