CSS Gradient Generator
Create beautiful CSS linear and radial gradients with a live preview.
background: linear-gradient(135deg, #667eea, #764ba2);Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors rendered by the browser. It is defined using CSS functions like linear-gradient() or radial-gradient() and can be used as a background image on any element.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a central point in a circular or elliptical shape. Both can have multiple color stops.
How do I change gradient direction?
For linear gradients, use the angle parameter (e.g., 90deg for left-to-right, 180deg for top-to-bottom). You can also use keywords like 'to right', 'to bottom left'. For radial gradients, you specify the shape and position.
Can I use more than two colors?
Yes! CSS gradients support unlimited color stops. Add more colors separated by commas in the gradient function, and optionally specify percentage positions for each stop to control where each color transition occurs.
Are CSS gradients supported in all browsers?
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. They have been widely supported since around 2013. No vendor prefixes are needed for current browser versions.