CSS Gradient Generator | Linear & Radial Gradients

How do I generate a CSS gradient with multiple color stops?

Open the Color Stops panel, set each stop’s hex color and percentage position, then choose a direction (to right, 135deg, etc.). The tool builds the background declaration in real time. Click Copy CSS to get the full property, for example: background: linear-gradient(135deg, #14b8a6 0%, #a855f7 100%);

What CSS property do I paste a generated gradient into?

Use the background or background-image property on any block element: .hero { background: linear-gradient(to bottom, #0f172a 0%, #1e3a5f 60%, #0f172a 100%); }. Gradients cannot be applied to color or border-color directly; for text gradients combine background-clip: text with -webkit-text-fill-color: transparent.

How do I make a diagonal gradient in CSS?

Set the direction to an angle keyword or degree value. To go top-left to bottom-right use 135deg or the keyword to bottom right. The tool’s direction grid buttons cover the eight most common angles (to right, to bottom, 45deg, 135deg, etc.) so you can preview each before copying.

Can I add more than two color stops to a CSS gradient?

Yes. Click Add Color Stop to append additional stops. Each stop gets its own color picker and position input (0–100%). You can add as many stops as needed; browsers support an arbitrary number. Removing a stop requires clicking the × button next to it.

What is a limitation of this gradient tool?

The tool only generates linear-gradient syntax. Radial gradients (radial-gradient()) and conic gradients (conic-gradient()) are not supported. For radial or conic patterns you would need to hand-write the CSS or use a dedicated tool. The generated output also does not include vendor-prefixed -webkit- fallbacks, which are no longer necessary for modern browsers.