CSS Gradient Generator

What is CSS Gradient Generator?

The CSS Gradient Generator is a free online tool for web designers and front-end developers who need a quick gradient without writing the syntax by hand. Choose a linear, radial, or conic gradient, set the angle in degrees for linear and conic types, and define color stops with a HEX color and a position percentage each. As you edit, a live preview shows the result and the matching CSS background rule updates instantly so you can copy it straight into a stylesheet. Use it to design buttons, hero backgrounds, cards, and overlays, or to learn how the linear-gradient(), radial-gradient(), and conic-gradient() functions work.

How to use CSS Gradient Generator

1. Choose the gradient type: Linear, Radial, or Conic.
2. For a linear or conic gradient, set the angle in degrees (0-360); radial uses a centered circle and ignores the angle.
3. Edit each color stop: type or pick a HEX color and set its position as a percentage (0-100).
4. Click Add stop to insert another color, or the trash icon to remove a stop (a minimum of two stops is kept).
5. Watch the live preview box update, then copy the generated CSS background rule with the copy button.

Examples

Linear, 90deg, #4f86f7 at 0% and #9333ea at 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, stops #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Frequently asked questions

Which gradient types are supported?

Three: linear-gradient (with an angle in degrees), radial-gradient (a centered circle), and conic-gradient (with a starting angle). Switch between them with the type toggle and the CSS updates instantly.

How do color stops and positions work?

Each stop has a color and a position percentage from 0 to 100. Stops are written into the CSS in the order they appear in the list, exactly as the browser interprets them, so you control the order directly. You can add stops with Add stop and remove them down to a minimum of two.

Can I pick colors visually instead of typing HEX?

Yes. Click the small color chip next to each stop to open your browser's native color picker, or type a HEX value like #4f86f7 directly into the color field. The preview and CSS update as you change it.

Why does the angle field disappear for radial gradients?

A radial gradient here is drawn as a centered circle, which does not use an angle, so the angle field is only shown for linear and conic types where it changes the direction.

Are my colors or CSS uploaded anywhere?

No. The gradient is built entirely in your browser with local string and color math — no colors, CSS, or settings are ever sent to a server, so it works offline and keeps your work private.