Design
CSS Gradient Generator
Create beautiful CSS gradients instantly. Copy the CSS code with a single click.
Input
Configure gradient type, colors, angle, and presets.
135°
Presets
Use presets as a starting point, then fine-tune colors and angle.
Output
background: linear-gradient(135deg, #6366f1, #ec4899);Frequently Asked Questions
What types of CSS gradients are there?
CSS supports three gradient types: linear-gradient (straight line between colors), radial-gradient (circular or elliptical from a center point), and conic-gradient (rotating around a point like a color wheel). Each serves different design purposes.
How do I apply a gradient as a CSS background?
Use the background or background-image property: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Copy the generated code from this tool and paste it directly into your CSS file or style attribute.
Why does my gradient look different across browsers?
Modern browsers (Chrome, Firefox, Safari, Edge) all support standard CSS gradients. Visual differences usually come from color space rendering or monitor calibration. Avoid deprecated vendor-prefixed syntax like -webkit-linear-gradient — use the standard form instead.