Gradient Code Generator

Create beautiful CSS gradients with live preview and code generation. Support for linear, radial, and conic gradients with multiple color stops.

Gradient Type

Type

Angle: 90°

Color Stops

Position: 0%

Position: 100%

Presets

Preview

Gradient Preview

linear-gradient(90deg, #667eea 0%, #764ba2 100%)

CSS Code

Simple CSS

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

Cross-browser CSS

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

Usage Tips

• Use linear gradients for directional color transitions
• Radial gradients work well for backgrounds and overlays
• Conic gradients are perfect for circular color wheels
• Add multiple color stops for complex transitions
• Always include a fallback color for older browsers