CSS Gradient Generator
Generate CSS gradients.
About this tool
Build a simple two-stop linear gradient and copy both plain CSS and a Tailwind arbitrary background class.
How to use
Pick two colors and an angle, run Generate, preview the band, copy the CSS or bg-[linear-gradient(…)] class.
Example
Defaults show a diagonal sky-to-green hero wash.
Input
135deg · #0ea5e9 → #22c55eOutput
background: linear-gradient(135deg, #0ea5e9, #22c55e);Tip
Complex multi-stop brand gradients may still belong in CSS variables.
Good to know
Can I add more than two color stops?
This generator builds a two-stop linear gradient. For multi-stop brand gradients, copy the output and add stops by hand, or keep them in CSS variables.
How do I use the Tailwind output?
Paste the bg-[linear-gradient(…)] class onto an element. Tailwind reads it as an arbitrary value, so no config change is needed.