CSS Gradient Generator

How to use

1. 1Pick a gradient type (Linear, Radial, or Conic) and a starting preset, then tweak the angle, shape, or position to match the look you want.
2. 2Edit color stops: click any color swatch to open the native picker, drag the position slider to move the stop along the gradient, and drag the opacity slider for soft fades or glass-morphism effects.
3. 3Use Add stop to introduce a new color (up to 8 stops), Remove on a stop to delete it, Reverse stops to flip end-to-end, or Randomize colors to try a fresh palette in one click.
4. 4Watch the live preview update in real time using the same value the tool will copy, so what you see is exactly what your site will render.
5. 5Click Copy CSS to grab the background and background-image lines, or Copy class to grab the Tailwind arbitrary-value utility for utility-first projects.

About this tool

CSS Gradient Generator builds production-ready CSS gradients in your browser with a live preview that uses the exact value you copy. Pick a gradient type (linear for the classic top-to-bottom or diagonal background, radial for a soft spotlight or vignette, conic for a rainbow or pie-chart effect), then shape the look with controls tuned for the type: a 0 to 360 degree angle slider plus 8 quick-pick buttons (0, 45, 90, 135, 180, 225, 270, 315) for linear, an ellipse-or-circle shape toggle and 9 anchor positions for radial, and a start angle plus position for conic. The color stop editor lets you keep between 2 and 8 stops, each with its own native color picker, hex input, position slider (0 to 100 percent), and opacity slider (0 to 100 percent). Quick presets cover the common looks (Sunset, Ocean, Aurora, Candy, Noir, Radial spotlight, Conic rainbow, Soft fade), Reverse stops mirrors the gradient end-to-end without losing your colors, and Randomize colors swaps in a fresh palette while keeping your stop count and positions. The output panel emits a copy-ready CSS block with both background and background-image declarations so it works as a one-line drop-in for any element, plus a Tailwind v3+ arbitrary-value utility (like bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]) for projects that prefer utility classes. Stops with full opacity emit hex colors and stops with partial opacity emit rgba so the output stays portable across older browsers, framework theme tokens, and design tools that import CSS. Useful for landing-page heroes, button and badge styles, card backgrounds, dashboard accents, OG image mockups, dark-mode overlays, glass-morphism gradients, and turning a sketched palette into a clean CSS value without leaving the browser. Everything runs locally on your device, so the colors and parameters you experiment with here are never uploaded.

Free to use. Works in your browser. No signup, no login.