Gradient Maker

Create beautiful CSS gradients for your projects

Gradient Controls

Gradient Type:

Linear Radial Conic

Direction Angle:

90°

Quick Directions:

Color Stops

%

%

Presets

Gradient Preview

CSS Code

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

Export Options

Gradient Timeline

Browser Support

Gradient Type	Chrome	Firefox	Safari	Edge
Linear Gradient	26+	16+	6.1+	12+
Radial Gradient	26+	16+	6.1+	12+
Conic Gradient	69+	83+	12.1+	79+

For older browsers, consider using a fallback background color.

CSS Gradient Tips

Use gradients for headers, buttons, and section backgrounds
For better text readability, use overlays or ensure sufficient contrast
Consider using media queries to adjust gradients for different screen sizes
Subtle gradients often work better for professional designs
Use vendor prefixes for maximum compatibility