CSS Gradient Generator
Create beautiful linear and radial gradients instantly
🚀 We are constantly adding new apps!
Have a tool you need? Drop your email and suggestion below.
How do I use this code?
Simply copy the CSS code provided in the output box and paste it into your stylesheet. You typically assign it to the background or background-image property of an element.
Linear vs. Radial Gradients?
Linear gradients transition colors in a straight line (e.g., top to bottom or left to right). Radial gradients start from a central point and expand outward in a circular or elliptical shape.
Is this compatible with all browsers?
The code generated uses standard CSS3 syntax, which is supported by all modern browsers (Chrome, Edge, Firefox, Safari). Older browsers may require vendor prefixes (like -webkit-), though they are rarely needed today.