What gradient types are supported?

Linear, radial, and conic gradients with unlimited colour stops.

Can I add multiple colour stops?

Yes — click anywhere on the gradient bar to add new stops. Drag to reposition them.

Yes. The output uses standard CSS3 gradient syntax supported by all modern browsers.

Copy the CSS code and save it in your project. You can also bookmark the URL to return to your gradient.

Create beautiful CSS gradients visually and copy the code. Works in your browser. Free, no signup.

No sign-up Batch convert 100% free

Type

Angle: 135°

Color Stops

50%

100%

CSS Code

background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);

Preview at different sizes

Button Preview

How useful is CSS Gradient Generator?

Choose your gradient type — linear, radial, or conic

Pick colours using the colour pickers or enter HEX/RGB values

Adjust the angle, direction, and colour stop positions

Copy the generated CSS code to your clipboard

Format and beautify JSON data with syntax highlighting.

Validate JSON syntax and find errors instantly.

Pick colors from any format and convert between HEX, RGB, HSL.

Test and debug regular expressions with real-time matching.

Generate placeholder text for designs and mockups.

Format and indent HTML code for better readability.