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.
Frequently Asked Questions
Q: What is the difference between linear and radial gradients?
What is the difference between linear and radial gradients? Linear gradients transition along a straight line, while radial gradients radiate from a central point.
Q: Can I use gradients in CSS?
Can I use gradients in CSS? Yes, use the background-image property with linear-gradient or radial-gradient functions.
Q: Can I create transparent gradients?
Can I create transparent gradients? Yes, use the opacity slider or manually edit the copied CSS to use rgba() or hsla() color values. Gradients with transparency are great for overlays and glass effects.
Q: How do I make the gradient responsive?
How do I make the gradient responsive? The generated CSS works at any container size. For full-screen gradients, apply the gradient to the body or a wrapper element. Use background-size: cover for best results.
Q: What is the difference between linear and radial gradients?
What is the difference between linear and radial gradients? Linear gradients transition along a straight line, perfect for headers and banners. Radial gradients radiate from a center point, ideal for spotlight effects and circular elements.