Gradient Generator

Create CSS gradients with multiple color stops

Gradient Settings

Gradient Type

Linear Radial

Direction

Color Stops

Preview

CSS Code

Background

background: linear-gradient(to right, #FF0000 0%, #0000FF 100%);

Background Image

background-image: linear-gradient(to right, #FF0000 0%, #0000FF 100%);

SVG Code

SVG Gradient

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
    <stop offset="100%" stop-color="#0000FF" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#gradient)" />
</svg>