🌈 CSS Gradient Generator
🎨 Color Stops
👁️ Live Preview
📋 CSS Code
✨ Preset Gradients
❓ Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors. It can be used as backgrounds, borders, or any place where you'd use an image in CSS.
What's the difference between linear, radial, and conic gradients?
Linear gradients transition colors along a straight line, radial gradients radiate from a center point, and conic gradients rotate around a center point like a color wheel.
How do I add more colors to my gradient?
Click the "Add Color Stop" button to add more colors. You can adjust each color's position to control where transitions occur.
Can I use these gradients in all browsers?
Modern browsers support CSS gradients well. For older browsers, consider using vendor prefixes or fallback colors.
How do I control the direction of a linear gradient?
Use the angle slider to rotate the gradient direction. 0° is top to bottom, 90° is left to right, and so on.
What are color stops?
Color stops define the colors in your gradient and their positions. Each stop has a color and a percentage position (0% to 100%).
Can I save my custom gradients?
Copy the generated CSS code to save your gradient. You can also bookmark this page with your gradient settings in the URL.
How do I use the generated CSS in my project?
Copy the CSS code and apply it to any element's background property. For example: background: linear-gradient(45deg, #667eea, #764ba2);