Gradient Generator

Build CSS gradients visually

Angle135°

#0d94880%

#2dd4bf100%

CSS

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

Loading tool…

About the Gradient Generator

Build CSS gradients visually — linear, radial, or conic — with up to six color stops, per-stop position sliders, and an angle control. The live preview shows exactly what you'll ship, and the generated background CSS is copy-ready for any stylesheet or Tailwind arbitrary value.

How to use

1Choose linear, radial, or conic.
2Add color stops and drag their positions.
3Set the angle, then copy the generated CSS.

Related Colors & Design tools

Color Picker & Converter Box Shadow Generator Flexbox Builder Grid Builder Border Radius Generator Font Pairing Preview

Gradient Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.