CSS Gradient Generator

Create beautiful CSS gradients with live preview

Live Preview

Multiple Types

Copy CSS

Preview

Gradient Type

Angle: 90°

Color Stops (2)

100%

CSS Code

background: #667eea; /* fallback */
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Tailwind CSS

bg-gradient-to-r from-[#667eea] to-[#764ba2]

Preset Gradients

Gradient Types

Linear: Colors flow in a straight line at a specified angle.

Radial: Colors radiate from a center point outward.

Conic: Colors rotate around a center point like a color wheel.

Pro Tips

•Use 2-3 colors for clean, professional gradients
•Adjacent colors on the color wheel blend smoothly
•Add a fallback solid color for older browsers
•Use subtle gradients for backgrounds, bold for accents