CSS Gradient Generator

Gradient Generator Overview

Generate linear or radial CSS gradients with multiple color stops, angle, and position; preview in real time and copy the CSS. Useful for backgrounds, buttons, cards, and other UI gradients.

This tool supports two or more color stops, angle and direction, and outputs standard linear-gradient / radial-gradient syntax for use in your project or design.

How to Use

Choose Gradient Type

Select linear or radial. For linear, set angle or direction (e.g. to right, to bottom); for radial, set center and shape.

Add and Adjust Stops

Add color stops and set color and position (percentage or length). Drag stops to reposition; click to edit color or remove. The preview updates in real time.

Copy CSS

When the result looks right, click "Copy CSS" to get the linear-gradient(...) or radial-gradient(...) code for your stylesheet or inline styles.

FAQ

Is conic-gradient supported?

Depends on the tool; if only linear and radial are available, write conic by hand or use another tool. Modern browsers support conic-gradient well.

Percentage or pixel for stop position?

Both work; percentage is good for responsive layout, pixels for fixed size. The tool often uses percentage; you can change units in your CSS later.

Which browsers support the output?

Standard CSS gradient syntax is supported in current Chrome, Firefox, Safari, and Edge; for older IE, provide a fallback color or handle separately.