What gradient types does this tool support?

The tool supports all three CSS gradient types: linear-gradient (straight line), radial-gradient (circular or elliptical), and conic-gradient (sweeping around a center point).

Can I add more than two color stops?

Yes. Click "Add Stop" to insert additional color stops. Each stop has its own color picker and position slider. You can also remove any stop except the first and last.

Does the output work in all browsers?

Linear and radial gradients have near-universal support. Conic gradients work in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). The generated CSS does not include vendor prefixes since they are no longer needed.

How do I use the copied CSS?

The copied value is a complete CSS function you can paste as a background property, e.g. background: linear-gradient(135deg, #ff6b6b, #4ecdc4); or as a background-image value.

Can I reverse the gradient direction quickly?

For linear gradients, set the angle to the opposite value (e.g. 135deg vs 315deg). You can also drag the color stop positions to effectively reverse the appearance without changing the angle.

Gradient Generator

Build linear, radial, or conic CSS gradients visually and copy the ready-to-use CSS in one click.

Gradient Type

Angle

135°

Color Stops

Live Preview

CSS Output

background

background-image

Summary

The Gradient Generator lets you design CSS gradients visually without memorizing syntax. Pick two or more colors, choose the gradient type (linear, radial, or conic), adjust the angle or position, and instantly see a live preview. When you are happy, copy the generated CSS value directly into your stylesheet.

How it works

Select a gradient type: linear, radial, or conic.
Choose your start and end colors using the color pickers.
Add extra color stops with the "Add Stop" button if needed.
Adjust the angle (linear) or position (radial) with the slider.
A live preview updates instantly as you change settings.
Click "Copy CSS" to copy the ready-to-use CSS value.

Use cases

Create background gradients for hero sections and banners.
Generate button hover effects with smooth color transitions.
Design card backgrounds and section dividers.
Build radial spotlight effects for landing pages.
Produce conic pie-chart-style backgrounds without SVG.
Prototype color themes quickly before writing any code.
Generate CSS for loading skeleton animations.
Export gradient values for use in CSS custom properties.

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu