CSS Gradient Generator
Choose two colors and a direction, preview the linear gradient live, and copy the exact CSS to paste into your stylesheet.
background: linear-gradient(to right, #4F46E5, #EC4899);How it works
Pick a start color, an end color, and a direction, and the tool assembles a CSS linear-gradient for you. The big preview panel shows exactly how it will look, so there's no guessing before you paste it into your code.
The direction buttons map to real CSS keywords and angles: 'to right' flows left-to-right, 'to bottom' runs top-to-bottom, and the diagonal options use 45 and 135 degrees. The gradient always blends smoothly from your first color to your second.
When you're happy with it, copy the full background declaration and drop it into any element's CSS. It's plain, standards-based CSS — no prefixes or libraries needed for modern browsers.
Frequently asked questions
What does 'to right' mean in a gradient?
It sets the direction the colors travel. 'To right' starts your first color on the left edge and blends to the second on the right. 'To bottom' runs top to bottom, and the diagonal options use angles like 45deg.
Can I use this gradient anywhere in CSS?
Yes. The output is a standard background declaration, so it works on any element — buttons, cards, hero sections, or the page body — in every modern browser without vendor prefixes.
How do I add more than two colors?
This generator focuses on clean two-color gradients. To add stops, copy the CSS and insert extra colors between the two inside the linear-gradient parentheses, separated by commas.