Gradient Type
Color Stops
Quick Palettes
Gradient Settings
Live Preview
Gradient Preview
Animation
Shifts background-position on an enlarged gradient — no external libraries.
Generated CSS
.gradient {
background: linear-gradient(45deg, #667eea, #764ba2);
}
Other Formats
Browser Support
Linear Gradients:
95%+
Radial Gradients:
95%+
Conic Gradients:
85%+
Fallback Options
Solid color fallback included
Vendor prefixes for older browsers
Progressive enhancement ready
Gradient Design Guide
Design Tips:
- • Use 2-3 colors for best results
- • Choose colors from the same palette
- • Consider accessibility and contrast
- • Test on different screen sizes
- • Use gradients as accents, not main content backgrounds
Technical Notes:
- • Linear: flows in straight line
- • Radial: flows from center outward
- • Conic: rotates around center point
- • Color stops control transition points
- • Always include fallback colors