About this tool
Build a two-color linear gradient and copy the CSS into your stylesheet.
Pick a start color, an end color, and an angle. The preview updates as you move the controls. The box shows the same CSS you can paste into a background property.
The gradient is a screen color. It does not simulate print ink or a brand guideline. Check contrast yourself if text will sit on top.
Nothing is uploaded. When you are done, copy the declaration and leave the page.
Quick steps
- Choose two colors.
- Set the angle.
- Copy the CSS.
Colors stay in this browser tab.
FAQ
Can I add a third stop?
This page makes two stops. Add more in your stylesheet if you need them.
Is the preview exact on every screen?
Browsers render gradients slightly differently. Check the target browser.