CSS Gradient Picker

Developer Tools

Create beautiful CSS gradients visually. Copy linear, radial, or conic gradient code.

Preview

Color 1

Color 2

Type

Angle: 135deg

CSS

background: linear-gradient(135deg, #3b82f6, #8b5cf6);

SCSS

$color1: #3b82f6;
$color2: #8b5cf6;
$angle: 135deg;

.background {
  background: linear-gradient($angle, $color1, $color2);
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6" />
      <stop offset="100%" style="stop-color:#8b5cf6" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#grad)" />
</svg>

Preset Gradients

About CSS Gradient Picker

This tool runs entirely in your browser. No data is uploaded to any server, making it completely private and secure. All processing happens locally on your device.