Back to Home

CSS gradient generator

Pick colours and an angle, preview the gradient live, and copy production-ready CSS.

Settings

Color 1
Color 2
Angle (135°)
background: linear-gradient(135deg, #6366f1, #a855f7);

How to use the CSS Gradient Generator tool

  1. 1Choose your colours.
  2. 2Adjust the angle until the preview looks right.
  3. 3Copy the generated CSS.

Good to know

  • Runs in your browser.
  • Outputs standard CSS that works in all modern browsers.

Frequently asked questions

Do CSS gradients need vendor prefixes?

No. Every current browser supports the standard linear-gradient() syntax.

Are gradients better than background images?

They're resolution-independent and add no file download, so they're often faster.

Can I use the gradient for text?

Yes: apply it as a background, then add background-clip: text and a transparent text colour.

Related tools

Box Shadow GeneratorCreate CSS box-shadow effects with live preview — adjust offset, blur, spread and colour, then copy the CSS. Free and in your browser.JS / CSS / HTML MinifierMinify JavaScript, CSS and HTML to shrink file size and speed up your site. Removes comments and whitespace safely, in your browser.HTML FormatterBeautify messy or minified HTML with clean, consistent indentation so it's easy to read and edit. Free and private.