What types of CSS gradients can I generate?

Linear, radial, and conic gradients are all supported.

Can I add more than two color stops?

Yes. Click "Add Stop" to add as many color stops as you need, each with its own color and position.

How do I copy the CSS output?

Click the "Copy CSS" button to copy the complete background CSS declaration to your clipboard.

CSS Gradient Generator

Build linear, radial, or conic CSS gradients with a live full-width preview. Add as many color stops as you need and drag them to any position between 0% and 100%. Copy the generated background CSS property when you are satisfied with the result.

Frequently Asked Questions

What types of CSS gradients can I generate?: Linear, radial, and conic gradients are all supported.
Can I add more than two color stops?: Yes. Click "Add Stop" to add as many color stops as you need, each with its own color and position.
How do I copy the CSS output?: Click the "Copy CSS" button to copy the complete background CSS declaration to your clipboard.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.