🌈 CSS Gradient Generator

Create beautiful CSS gradients with live preview. Supports linear, radial, and conic gradients. Copy the CSS code instantly.

Gradient Type:

Angle: 135°

Color Stops:

100%

CSS Code:

Popular Gradient Presets

About CSS Gradient Generator

CSS gradients allow you to display smooth transitions between two or more colors. They are commonly used for backgrounds, buttons, and decorative elements in web design.

Gradient Types:

Linear: Colors transition in a straight line. You can set the angle.
Radial: Colors radiate outward from a center point.
Conic: Colors rotate around a center point like a color wheel.

Frequently Asked Questions

How do I use the gradient in my website?

Click "Copy CSS" to copy the full CSS code including the background property. Paste it into your CSS file or inline style.

Can I add more than 2 colors?

Yes! Click "Add Color" to add more color stops. You can create complex gradients with many colors.

Related Tools

Color Palette Color Converter Box Shadow Generator