Skip to content
M2TOOLKIT

Popular tools

Menu

CSS Gradient Generator

Design a CSS gradient visually and copy the code.

  • Free
  • No sign-up
  • Runs in your browser
Type
135°
0%
100%

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the CSS Gradient Generator

  1. Choose linear or radial.
  2. Set the angle and colors.
  3. Drag each color's position.
  4. Copy the CSS.

What does this tool do?

The generated CSS includes a solid background color first as a fallback, then the gradient. All modern browsers support CSS gradients without prefixes.

Why use it?

  • Hero sections and buttons.
  • No image files needed.
  • Up to six color stops.

Example

background: linear-gradient(135deg, #2c48d6 0%, #b02a6b 100%);

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the css gradient generator.