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
How do I use the generated CSS?
Paste it as a `background` or `background-image` value on the element you want to style. The output already includes the `linear-gradient(...)` syntax, so it’s ready to drop in.
Can I add more than two colors?
This generator focuses on the two-stop case because it covers most real-world UI gradients. For multi-stop work, add extra colors directly to the generated CSS. The syntax is `linear-gradient(angle, color1 0%, color2 50%, color3 100%)`.
Why do gradients sometimes look banded?
Banding shows up when 8-bit color steps stretch across a large area, especially between similar colors. Pick colors with more contrast, add an intermediate stop, or apply a subtle noise overlay to break up the bands.
Does it work in older browsers?
Linear gradients work in every modern browser without prefixes. If you need to support browsers more than ten years old, add `-webkit-` and `-moz-` prefixes to the same value.
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.