Add color stops
Build beyond a simple two-color fade by adding the exact colors your composition needs.
Build smooth transitions
CSS Gradient Generator
Create a gradient visually, tune the color stops until the transition feels right, then copy clean CSS into your site or app. Multi-stop gradients are supported from the start.
Create a CSS gradientTune the transition
Adjust the stops while watching the result update so spacing and color movement are easy to judge visually.
Copy the CSS
When the gradient is ready, copy the generated CSS and drop it directly into your background styles.
Quick answers
Frequently asked questions
How do I make a CSS gradient?
Choose two or more color stops, position them along the gradient, and use the resulting CSS linear-gradient value in a background declaration.
Can a CSS gradient have more than two colors?
Yes. CSS gradients can contain multiple color stops. Chromble lets you build multi-stop transitions rather than limiting you to two colors.
Can I copy the generated CSS?
Yes. Build the gradient in Chromble and copy the finished CSS value when you are ready to use it in your project.