Make a CSS gradient in seconds
Choose two or three colors, pick linear or radial, set the angle, and copy production-ready CSS. Gradients add depth to buttons, hero sections, cards, and backgrounds without a single image file. Everything updates live so you can dial in exactly the look you want.
FAQ
- How do I use the generated CSS?
- Paste it as the
backgroundof any element, e.g.background: linear-gradient(90deg, #ff4d4d, #4d8bff); - Linear vs radial?
- Linear blends along a straight line at your chosen angle; radial blends outward from the center.
More color tools: Color Converter & Palette (HEX/RGB/HSL + contrast) · or play Spectra, our daily color puzzle.