Tool2Help

CSS Gradient Generator

Design a gradient visually and copy the CSS. Linear and radial, unlimited color stops, live full-width preview.

Color stops — click the bar to add, drag to move, double-click a handle to remove

%

Generated CSS

Presets

About the gradient generator

Writing gradient CSS by hand means editing a string and reloading until it looks right. This generator flips that around: you adjust the angle, drag color stops along the bar and watch the preview update in real time, then copy a single line of CSS when you are happy. The output uses standard `linear-gradient` and `radial-gradient` syntax with no vendor prefixes, which every browser released in the last decade supports natively.

How to use the gradient generator

  1. Choose linear or radial as the gradient type.
  2. For a linear gradient, set the angle with the dial or type an exact degree value.
  3. Click the gradient bar to add a color stop, drag a stop to move it, and double-click a stop to remove it.
  4. Copy the generated CSS and paste it into your stylesheet as a background value.

Frequently asked questions

Do I need vendor prefixes like -webkit-linear-gradient?
No. Unprefixed gradient syntax has been supported in every major browser since around 2013. Adding old prefixes today only bloats your stylesheet.
Why does my gradient look banded or striped?
Banding happens when a gradient spans a long distance with very little color difference, so the display cannot show enough intermediate steps. Adding a subtle noise texture overlay, or using slightly more saturated endpoint colors, usually hides it.
How do I make a gradient go diagonally?
Set the angle to 45deg for a bottom-left to top-right sweep, or 135deg for top-left to bottom-right. In CSS, 0deg points upward and the angle increases clockwise.
Can I use a gradient on text?
Yes. Apply the gradient as a background on the text element, then add `background-clip: text` and `color: transparent`. The generator output works unchanged for that technique.

Other free tools people use alongside the Gradient Generator.

Color Converter Paste a color in any common format and get every other format back instantly, along with a live preview and a generated set of tints and shades. Color Contrast Checker Enter a text color and a background color to get the exact contrast ratio, plus a clear pass or fail against every WCAG 2.1 level. Color Color Picker Pick a color visually, refine it with precise sliders, and copy it in whichever notation your project needs. Color Password Generator Generate a strong random password using your browser cryptographic random number generator. Nothing is sent anywhere. Generators