About This Tool
Create beautiful CSS linear and radial gradients with a visual editor. Pick colors, adjust stops, change direction or angle, and see the live preview update in real time. Copy the generated CSS code — including vendor prefixes for older browsers — and paste it directly into your stylesheet.
Frequently Asked Questions
- Do CSS gradients work in all browsers?
- Modern CSS gradients (linear-gradient, radial-gradient) are supported in all current browsers including Chrome, Firefox, Safari, and Edge. The tool can optionally generate -webkit- prefixes for older browser versions.
- Can I create multi-color gradients?
- Yes. Add as many color stops as you need. You can also adjust the position of each stop to control where colors blend. This allows for complex rainbow, sunset, or custom brand gradients.
- What's the difference between linear and radial gradients?
- Linear gradients transition colors along a straight line (top to bottom, left to right, diagonal, or any angle). Radial gradients transition colors outward from a center point in a circular or elliptical shape.
- Can I use the gradient as a background for text?
- Yes. Use background-clip: text with -webkit-text-fill-color: transparent to apply the gradient to text. The generated CSS provides the gradient definition — combine it with these properties for gradient text.