CSS Gradient Generator
Design linear and radial CSS gradients visually, add or remove color stops, and copy the generated CSS. Everything runs in your browser, and nothing is uploaded.
About the CSS Gradient Generator
The CSS Gradient Generator is a visual tool for building linear and radial CSS gradients without writing code by hand. Pick your colors, set their positions, adjust the angle, and watch a live preview update instantly before copying production-ready CSS. It's ideal for web designers, front-end developers, and WordPress or Divi users who want polished backgrounds in seconds.
How it works
- Choose a gradient type (linear or radial) and, for linear gradients, set the direction with the angle control.
- Add, remove, or edit color stops (each stop has a color picker, an editable hex value, and a position percentage) while the live preview reflects every change.
- Copy the generated CSS (for example, background: linear-gradient(...)) and paste it straight into your stylesheet, or hit Random to explore fresh ideas.
Features
- Live preview that updates instantly as you change colors, positions, type, or angle.
- Supports both linear gradients (with full angle control) and radial gradients.
- Unlimited color stops with a minimum of two, each with a color picker, hex input, and position %.
- Random button to generate inspiring gradient combinations in one click.
- 100% client-side, free, with no signup. Your work never leaves your browser.
Frequently asked questions
How do I add more colors to the gradient?
Use the add button to insert a new color stop, then set its color and position percentage. You can keep adding stops to create multi-color gradients, and remove any stop as long as at least two remain.
What's the difference between a linear and radial gradient?
A linear gradient blends colors along a straight line in a direction you set with the angle control, which is great for backgrounds and buttons. A radial gradient blends colors outward from a center point in a circular or elliptical shape, which works well for spotlights and glows.
How do I control the gradient angle?
For linear gradients, use the angle control to set the direction in degrees. For example, 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom. The live preview updates as you adjust it. Angle does not apply to radial gradients.
Do I need vendor prefixes today?
In almost all cases, no. Modern browsers fully support the standard linear-gradient() and radial-gradient() syntax without -webkit- or -moz- prefixes, so the CSS this tool generates works as-is unless you must support very old legacy browsers.
Can I use this in Divi, Elementor, or my theme CSS?
Yes. The generated CSS is standard, so you can paste the background declaration into any theme or child-theme stylesheet, a custom CSS box in the WordPress Customizer, or a Divi/Elementor custom CSS field. It works anywhere you can add a CSS background value.