CSS Gradient Generator
Build linear CSS gradients and copy the code.
About this tool
Flat fills are fine; gradients add depth when used with restraint. This free CSS gradient generator builds linear gradients with a live preview. Tune colors and angle locally, copy the CSS, and paste into your stylesheet—no Figma export required for a simple wash.
How to use
- Pick two or more gradient stop colors.
- Adjust angle or direction controls.
- Preview the gradient in the tool.
- Copy the CSS gradient declaration into your project.
Frequently asked questions
Focus is linear CSS gradients. For radial, adapt the output or use a fuller design tool.