CSS Gradient Generator

Create stunning linear and radial gradients with multiple color stops. Export CSS instantly.

Quick Presets

Gradient Type

Angle: 90°

0° (Right)90° (Down)180° (Left)270° (Up)

Color Stops (2)

Stop 1

Color

Position: 0%

Stop 2

Color

Position: 100%

Live Preview

CSS Code

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

Gradient Value

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

Gradient Tips

Linear: Creates a gradient along a straight line at the specified angle

Radial: Creates a gradient radiating from the center outward

Color Stops: Define where each color appears in the gradient (0-100%)

Angle: 0° = right, 90° = down, 180° = left, 270° = up