Gradient Generator
Create beautiful linear gradients with custom colors and stops
background: linear-gradient(to right, #6366f1, #a855f7);
How to Create Stunning CSS Gradients
Our gradient generator makes it easy to create beautiful gradient backgrounds for your web projects. Choose between linear or radial gradient types, pick two or more colors with position controls, and adjust the direction or angle to get the perfect look. The preview updates in real time so you can see exactly what your gradient will look like.
Linear gradients transition colors along a straight line. You can control the direction by setting an angle (0–360 degrees) or using predefined directions like top-to-bottom or left-to-right. Radial gradients radiate outward from a center point, with support for ellipse and circle shapes at custom positions. Each type creates a different visual effect suitable for different design contexts.
Once you're happy with your gradient, simply copy the generated CSS code and paste it into your stylesheet. The tool outputs standard CSS background-image syntax that works in all modern browsers. You can also add multiple color stops for more complex gradients, adjust the stop positions, use preset gradients, save your favorites, share via URL parameters, and preview how the gradient looks as a full-page background.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors that you can use as a background image in web design. Gradients are created using the CSS background-image property with functions like linear-gradient(), radial-gradient(), and conic-gradient().
What types of gradients can I create?
You can create linear gradients (colors transition along a straight line) and radial gradients (colors radiate outward from a center point). Each type offers unique visual effects for different design needs.
How do I add more colors to my gradient?
Click the "Add Stop" button to insert additional color stops. You can specify the position of each color stop as a percentage using the slider or number input. This allows you to create complex multi-color gradients with precise control over where each color appears.
Can I save or share my gradients?
Yes! You can save gradients to your local storage with a custom name by using the Save button. You can also share gradients via URL parameters — just add ?from=COLOR1&to=COLOR2&angle=135 to the gradient generator URL. Additionally, preset gradients are available for quick inspiration.
Do all browsers support CSS gradients?
Yes, CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The generated code uses standard CSS syntax without vendor prefixes, ensuring broad compatibility across current browser versions.