What CSS gradient types are supported?

Linear (directional), radial (circular from center), and conic (rotating around a center point).

Can I add more than 2 colors?

Yes! Click "Add stop" to add unlimited color stops. Each can have its own color and position percentage.

How do I use the CSS in my project?

Copy the generated CSS and paste it as the background property of any HTML element.

Does this generate vendor prefixes?

Modern browsers support standard gradient syntax without prefixes. The output uses standard CSS.

Can I create a transparent gradient?

Yes. Use any color as a starting point and white or the background color as the end to simulate transparency in many contexts.

ToolsArena

CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients visually.

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

Type

Angle: 135°

Color Stops

#6366f10%

#ec4899100%

Presets

How to Use CSS Gradient Generator

1
Select gradient type: linear, radial, or conic.
2
Adjust the angle (for linear/conic).
3
Click color swatches to change colors.
4
Drag sliders to adjust stop positions.
5
Click "Copy" to get the CSS.

About CSS Gradient Generator

Design stunning CSS gradients with a live preview. Choose linear, radial, or conic gradient type. Add unlimited color stops, set their positions, and adjust the angle. Includes 6 beautiful presets. Copy the CSS with one click.