CSS gradient generator
Build a CSS linear gradient in seconds. Pick two colors, drag the angle, and copy the CSS straight into your stylesheet.
Pick a color or paste any HEX value.
Pick a color or paste any HEX value.
background: linear-gradient(135deg, #FF6B35 0%, #1A8FE3 100%);
Drop into any element’s background.
How to use this tool
- 1Set the start and end colors using the color pickers or HEX inputs.
- 2Adjust the angle to change the gradient direction.
- 3Copy the generated CSS and paste it into your `background` or `background-image` rule.
About this tool
CSS gradients are rendered by the browser, so they scale perfectly and add no image weight. The most common pattern (two colors and a direction) covers most use cases for hero sections, buttons, and cards. For more elaborate effects, add additional stops or move to a radial or conic gradient.
Related tools
px to rem converter
Convert px to rem with a custom base font size. Instant, accurate, no signup.
rem to px converter
Convert rem to px with a custom base font size. Instant, accurate, no signup.
px to em converter
Convert px to em with a custom base font size. Instant, accurate, no signup.
em to px converter
Convert em to px with a custom base font size. Instant, accurate, no signup.
Box-shadow generator
Tune offset, blur, spread, color, and inset to build a CSS box-shadow. Live preview and copy CSS.
Frequently asked questions
Short answers to what people ask most.
How do I use the generated CSS?
Can I add more than two colors?
Why do gradients sometimes look banded?
Does it work in older browsers?
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.