CSS Gradient Generator
Pick two colors and an angle — the CSS writes itself.
Generated on your device.
Common questions
How do I use the generated CSS?
Copy the line and paste it into any element's styles — it's a standard background declaration that works in every modern browser, no prefixes needed.
Linear or radial — when?
Linear sweeps in a direction (the angle slider) — heroes, buttons, section backgrounds. Radial blooms from the center — spotlights, soft vignettes, orbs.
How do I pick two colors that look good together?
Easy wins: two shades of the same hue (light blue → dark blue), or neighbors on the color wheel (blue → purple, orange → pink). High-contrast opposites get loud fast — fine for accents, tiring for backgrounds.