🎨 CSS Gradient Generator
Design a beautiful gradient with unlimited color stops, tweak the angle, and copy the CSS in one click — or export a PNG. Runs 100% in your browser, free, no signup.
🔒 Private · Free · No signupHow to use 🎨 CSS Gradient Generator
- 1. Choose Linear or Radial. For a linear gradient, drag the Angle slider from 0° to 360° to set the direction of the blend.
- 2. Edit the Color stops: click a swatch to pick a color and drag its slider to set its position. + Add color stop adds more, and ✕ removes one.
- 3. Short on ideas? Click one of the preset swatches or 🎲 Random for a fresh two-color gradient and angle, then fine-tune the stops to taste.
- 4. Click Copy to grab the ready-to-paste background CSS, or Download PNG to save a 1200×675 image of your gradient.
Frequently asked questions
Is this CSS gradient generator free?
Yes, it’s free with no sign-up. There’s no limit on the number of color stops or on how many gradients you create. The CSS you copy is plain, standard code you can use in any personal or commercial project.
Does the CSS gradient generator send anything to a server?
No. Everything, from the live preview to the PNG export, runs in your browser. Your colors and settings aren’t uploaded or saved on GrabCast’s servers, and the tool keeps working once the page has loaded.
How do I make a linear gradient in CSS?
Use the linear-gradient() function on the background property with an angle and two or more colors, each with an optional position — for example 135deg, #667eea 0%, #764ba2 100%. This tool writes that line for you: set the angle and stops, then click Copy and paste it into your stylesheet.
What is the difference between a linear and a radial CSS gradient?
A linear gradient blends colors along a straight line at the angle you choose, such as top to bottom or diagonally. A radial gradient spreads outward from the center in a circle. Here, radial gradients are written as radial-gradient(circle, …), and the Angle slider is hidden because it doesn’t apply.
How do I add more than two colors to a CSS gradient?
Click + Add color stop, pick the new stop’s color and drag its slider to any position between 0% and 100%. Stops are sorted by position in the generated CSS automatically, and any stop can be removed with ✕ as long as two remain.
Do CSS gradients work in all browsers?
Yes. The linear-gradient() and radial-gradient() syntax used here works in all current browsers, including Chrome, Edge, Firefox and Safari on desktop and mobile, without vendor prefixes. If you need an image instead — for email or a design app — use Download PNG for a 1200×675 file.