Gradient Generator
Backgrounds with a little drama. Pick two colors, drag the angle slider, and the penguin hands you a linear-gradient to paste straight into your stylesheet.
How to use
- Pick your start and end colors. The color pickers show the hex codes as you go.
- Drag the angle slider. 0° runs bottom-to-top, 90° left-to-right — 135° is the classic diagonal.
- Preview it live. The big box updates the instant anything changes.
- Copy the CSS. One tap grabs the linear-gradient line, ready for your stylesheet.
Frequently asked questions
How do I make a CSS gradient?
Pick two colors and an angle above, then copy the generated line — something like background: linear-gradient(135deg, #6f7bf7, #ec5f9a); — and paste it into your CSS. The preview shows exactly what you'll get, in every modern browser.
What angle should I use for a gradient?
135° (diagonal) is the crowd favorite for hero sections, 90° reads left-to-right, and 180° gives a top-to-bottom fade for subtle backgrounds. There's no wrong answer — drag the slider and trust your eyes.
Can I use more than two colors in a gradient?
This generator keeps it simple with two stops, which covers most backgrounds and buttons. For multi-stop gradients, chain more colors into the same syntax: linear-gradient(135deg, #6f7bf7, #9d7bff 50%, #ec5f9a).
Do CSS gradients work in all browsers?
linear-gradient works in every modern browser — Chrome, Safari, Firefox, Edge — with no vendor prefix needed. It also degrades gracefully: set a plain background-color first and older browsers simply show that instead.
Related tools
Keep the momentum going.