What browser support do CSS gradients have?
CSS gradients (Linear and Radial) are supported by all modern browsers. Conic gradients are also widely supported in all major evergreen browsers (Chrome, Firefox, Safari, Edge).
How many color stops can I add?
This tool allows you to add up to 5 color stops to keep the UI clean, but CSS supports unlimited color stops. You can generate the base code here and add more manually if needed.
Can I use transparent colors?
Currently, this tool uses the standard color picker which typically outputs HEX values. For transparency (RGBA), you can edit the generated CSS code manually to replace HEX codes with rgba() values.
Is this tool free?
Yes, our CSS Gradient Generator is completely free to use. There are no subscriptions, and you don't need to sign up.
Can I save my gradients?
Currently, we don't support saving to an account, but you can copy the CSS code and save it in your project files.
What is the difference between Linear and Radial?
Linear gradients transition colors along a straight line (e.g., top to bottom), while Radial gradients radiate from a central point outward.
How do I use the generated CSS?
Simply copy the code from the CSS Output box and paste it into your stylesheet under the `background` or `background-image` property.
Can I adjust the angle of a linear gradient?
Yes, use the Rotation Angle slider or input box to set the direction in degrees (e.g., 90deg for left-to-right).
Does it support older browsers?
The generated code is standard CSS3. For very old browsers (like IE9), you might need vendor prefixes, which this tool does not currently add automatically.
What is a Conic gradient?
A Conic gradient rotates colors around a center point, like a pie chart or color wheel. It is useful for creating interesting patterns and charts.