CSS Gradient Generator
Pick your colors and angle, preview the result live, and copy the CSS.
90°
background: linear-gradient(90deg, #10b981, #0ea5e9);Built entirely with native CSS
The code produced here uses only standard CSS gradient functions — no build step, preprocessor or external library needed. Paste it directly into any stylesheet or inline style.
Frequently asked questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a chosen angle, while a radial gradient transitions colors outward from a center point.
How many colors can I add?
You can add as many color stops as you like; the CSS updates automatically to blend smoothly between all of them in order.
Will this work in all browsers?
The linear-gradient() and radial-gradient() CSS functions are supported by all modern browsers.
Related tools
You might also need these while working on the same task.
Generate random, analogous or complementary color palettes with HEX, RGB and HSL.
Open toolCheck the WCAG contrast ratio between a text color and a background color for AA and AAA accessibility.
Open toolChange width and height in pixels or percentage and crop photos to standard ratios.
Open toolCreate a Brazilian PIX copy-and-paste QR code in seconds.
Open tool