Free CSS Gradient Generator

Free Gradient Generator for Designers & Developers

Create stunning CSS linear and radial gradients with live preview. Export to CSS, Tailwind, Bootstrap, Sass, and 10+ frameworks. Professional gradient maker tool - 100% free.

Live Preview

#5433FF

#20BDFF

Quick Presets

Start Color

End Color

Type

Direction90°

Start0%

End100%

Code

/* Standard CSS */
.gradient {
  background: linear-gradient(90deg, #5433FF 0%, #20BDFF 100%);
  background: -webkit-linear-gradient(90deg, #5433FF 0%, #20BDFF 100%);
  background: -moz-linear-gradient(90deg, #5433FF 0%, #20BDFF 100%);
}