🌈 CSS Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, conic. Export clean CSS code. Free, instant.

Angle: 90°

Color 1

Color 2

CSS Code

About CSS Gradients

CSS gradients let you display smooth transitions between two or more colors. They're defined as background-image values:

Linear: Colors transition along a straight line (angle-based)
Radial: Colors radiate from a center point (circular/elliptical)
Conic: Colors rotate around a center point (pie-chart style)

Copy the generated CSS and paste it directly into your stylesheet.

About Gradient Generator

Create beautiful CSS gradients visually. Linear and radial gradients with multiple color stops. Adjust angle, position, and color distribution. Copy ready-to-use CSS code. Perfect for web backgrounds, buttons, and UI design.

Linear & Radial

Switch between linear and radial gradient types. Control angle, position, and shape for perfect results.

Multiple Color Stops

Add unlimited color stops. Drag to reposition, adjust each color with the picker. Create complex gradients easily.

Live CSS Output

Copy the exact CSS gradient code. Ready to paste into your stylesheets, Tailwind config, or design system.

Real-Time Preview

See your gradient as you build it. Full-width preview updates instantly with every color or angle change.