Skip to content
ToolsNest

CSS gradient generator

Choose colours, positions and angle to build a gradient, then copy ready-to-use CSS.

background: linear-gradient(135deg, #6d3fd6 0%, #f59e0b 100%);

Your text is processed in your browser as you type. It is not sent to ToolsNest servers or stored after you leave the page.

How to use the CSS Gradient Generator

  1. 1Choose linear or radial.
  2. 2Adjust colours, stop positions and angle.
  3. 3Copy the CSS.

Supported formats and limits

  • 2 to 5 colour stops.
  • Output is standard CSS supported by all modern browsers.

Common uses

  • Website hero backgrounds.
  • Buttons and badges.
  • Slide backgrounds.

Frequently asked questions

Can I use the CSS in Tailwind?

Yes, as an arbitrary value or in a custom class.

Related tools

CSS Box Shadow Generator

Design box shadows with sliders and copy the CSS.

Open tool

Color Contrast Checker

Check text and background colours against WCAG AA and AAA.

Open tool

Color Converter

Convert colours between HEX, RGB and HSL with a live preview.

Open tool