Loading the tool…
About the CSS Gradient Generator
Design a linear or radial CSS gradient with two or three colour stops, adjust the angle, preview it live and copy the CSS.
How to use it
- Choose linear or radial and pick your colours.
- Adjust the angle for a linear gradient.
- Copy the CSS into your stylesheet.
Frequently asked questions
Do I need vendor prefixes?
No. Unprefixed linear-gradient() and radial-gradient() work in all current browsers.
How do I make the gradient smoother?
Use colours that are close in lightness, or add a middle stop so the transition does not look muddy.
Related tools
JSON Formatter & ValidatorPretty-print, minify and validate JSON with clear error messages.TrendingBase64 Encoder & DecoderEncode or decode text to Base64, with Unicode and URL-safe support.Color Converter & Contrast CheckerHEX ↔ RGB ↔ HSL with WCAG contrast ratios against white and black.
Results are estimates for general information. For financial, tax, medical or legal decisions, check with a qualified professional.