What is the difference between gradient types?

Linear gradients flow in a straight line. Radial gradients radiate outward from a center point. Conic gradients rotate around a center point.

How many color stops can I add?

You can add as many color stops as you need. Most gradients look best with 2-5 stops.

Yes, modern CSS gradient syntax is supported by all current browsers. No vendor prefixes are needed.

// css-gradient

Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradient support.

Type

Angle: 135deg

Color Stops

100%

CSS Output

background: linear-gradient(135deg, #0EA5E9 0%, #8B5CF6 100%);

Choose type-Select the gradient type: linear, radial, or conic.
Set direction-For linear gradients, adjust the angle. For radial, choose the shape.
Add colors-Add color stops and adjust their positions using the controls.
Copy CSS-Copy the generated CSS code from the output area.

CSS Gradient Generator provides a visual editor for creating CSS gradients. It supports linear, radial, and conic gradient types.

Adjust the angle, add multiple color stops, and see a live preview of your gradient. The tool generates ready-to-use CSS code.

All processing is done locally in your browser. No external services are used.

Color Picker

Pick colors and convert between HEX, RGB, and HSL formats. Check WCAG contrast ratios.