CSS Gradient Generator

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.

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.

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.

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.

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.