CSS Gradient Generator
Design beautiful custom gradients for your website and instantly copy the CSS code.
Type
#8b5cf6
#3b82f6
What is a CSS Gradient?
CSS gradients let you display smooth transitions between two or more specified colors. By utilizing CSS gradients instead of image files, you can significantly reduce your website's load time and bandwidth usage, while maintaining crisp rendering on high-resolution displays.
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line (which you can control by changing the angle). A radial gradient transitions colors radiating outward from a central point.
Is the generated CSS compatible with all browsers?
Yes, the standard linear-gradient and radial-gradient functions generated by this tool are fully supported in all modern web browsers including Chrome, Safari, Firefox, and Edge.