Design beautiful linear and radial gradients with real-time Canvas preview. Copy CSS code instantly.
A gradient is a smooth transition between two or more colors. Gradients add depth, dimension, and visual interest to web designs, UI elements, and illustrations.
Select two colors, choose a gradient angle, and instantly see the result on Canvas. Copy the CSS code to use in your project.
What is the difference between linear and radial gradients? Linear gradients transition along a straight line, while radial gradients radiate from a central point.
Can I use gradients in CSS? Yes, use the background-image property with linear-gradient or radial-gradient functions.