SVG Linear Gradient

Linear Gradient creates smooth color transitions between two points.

Basic Syntax

<svg width="200" height="100">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>

  <rect fill="url(#myGradient)" x="10" y="10" width="180" height="80" rx="8"/>
</svg>

Main Properties

linearGradient Properties

Property	Description
id	Unique gradient identifier
x1, y1	Gradient start coordinates
x2, y2	Gradient end coordinates
gradientUnits	Coordinate system
spreadMethod	Spread method

stop Properties

Property	Description
offset	Color position (0%-100% or 0-1)
stop-color	Color value
stop-opacity	Opacity

Gradient Direction

Horizontal Gradient (Default)

<svg width="300" height="80">
  <defs>
    <linearGradient id="horizontal" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>

  <rect fill="url(#horizontal)" x="10" y="10" width="280" height="60" rx="8"/>
</svg>

Vertical Gradient

<svg width="300" height="100">
  <defs>
    <linearGradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>

  <rect fill="url(#vertical)" x="10" y="10" width="280" height="80" rx="8"/>
</svg>

Diagonal Gradient

<svg width="400" height="100">
  <defs>
    <!-- Top-left to bottom-right -->
    <linearGradient id="diagonal1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>

    <!-- Top-right to bottom-left -->
    <linearGradient id="diagonal2" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </linearGradient>
  </defs>

  <rect fill="url(#diagonal1)" x="10" y="10" width="180" height="80" rx="8"/>
  <rect fill="url(#diagonal2)" x="210" y="10" width="180" height="80" rx="8"/>
</svg>

Multi-color Gradient

<svg width="400" height="80">
  <defs>
    <linearGradient id="rainbow">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="17%" stop-color="#f59e0b"/>
      <stop offset="33%" stop-color="#eab308"/>
      <stop offset="50%" stop-color="#22c55e"/>
      <stop offset="67%" stop-color="#3b82f6"/>
      <stop offset="83%" stop-color="#6366f1"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>

  <rect fill="url(#rainbow)" x="10" y="10" width="380" height="60" rx="8"/>
</svg>

Transparent Gradient

<svg width="300" height="100">
  <defs>
    <linearGradient id="fadeOut">
      <stop offset="0%" stop-color="#3b82f6" stop-opacity="1"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect x="10" y="10" width="280" height="80" fill="#f3f4f6"/>

  <!-- Gradient mask -->
  <rect fill="url(#fadeOut)" x="10" y="10" width="280" height="80"/>
</svg>

spreadMethod Spread Mode

How to handle when gradient area is smaller than fill area:

<svg width="500" height="100">
  <defs>
    <!-- pad: default, extends edge color -->
    <linearGradient id="padGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="pad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>

    <!-- repeat: repeat gradient -->
    <linearGradient id="repeatGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="repeat">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>

    <!-- reflect: mirror repeat -->
    <linearGradient id="reflectGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="reflect">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>

  <rect fill="url(#padGrad)" x="10" y="10" width="150" height="80" rx="5"/>
  <text x="85" y="110" text-anchor="middle" font-size="11">pad</text>

  <rect fill="url(#repeatGrad)" x="175" y="10" width="150" height="80" rx="5"/>
  <text x="250" y="110" text-anchor="middle" font-size="11">repeat</text>

  <rect fill="url(#reflectGrad)" x="340" y="10" width="150" height="80" rx="5"/>
  <text x="415" y="110" text-anchor="middle" font-size="11">reflect</text>
</svg>

gradientUnits Coordinate System

<svg width="400" height="120">
  <defs>
    <!-- objectBoundingBox (default): relative to object bounds -->
    <linearGradient id="objectBB" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>

    <!-- userSpaceOnUse: use user coordinate system -->
    <linearGradient id="userSpace" x1="210" y1="0" x2="390" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </linearGradient>
  </defs>

  <rect fill="url(#objectBB)" x="10" y="20" width="180" height="80" rx="8"/>
  <text x="100" y="120" text-anchor="middle" font-size="10">objectBoundingBox</text>

  <rect fill="url(#userSpace)" x="210" y="20" width="180" height="80" rx="8"/>
  <text x="300" y="120" text-anchor="middle" font-size="10">userSpaceOnUse</text>
</svg>

Gradient for Stroke

<svg width="300" height="100">
  <defs>
    <linearGradient id="strokeGrad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="50%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>
  </defs>

  <rect x="20" y="20" width="120" height="60" rx="10"
        fill="none" stroke="url(#strokeGrad)" stroke-width="4"/>

  <circle cx="230" cy="50" r="35"
          fill="none" stroke="url(#strokeGrad)" stroke-width="4"/>
</svg>

Gradient for Text

<svg width="300" height="80">
  <defs>
    <linearGradient id="textGrad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>

  <text x="150" y="55" text-anchor="middle" font-size="48" font-weight="bold"
        fill="url(#textGrad)">
    GRADIENT
  </text>
</svg>

Practical Application Examples

Button Gradient

<svg width="200" height="60">
  <defs>
    <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
  </defs>

  <rect fill="url(#btnGrad)" x="10" y="10" width="180" height="44" rx="8"/>
  <text x="100" y="38" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Button
  </text>
</svg>

Progress Bar Gradient

<svg width="300" height="30">
  <defs>
    <linearGradient id="progressGrad">
      <stop offset="0%" stop-color="#22c55e"/>
      <stop offset="50%" stop-color="#eab308"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect x="10" y="5" width="280" height="20" rx="10" fill="#e5e7eb"/>

  <!-- Progress -->
  <rect x="10" y="5" width="200" height="20" rx="10" fill="url(#progressGrad)"/>
</svg>

Sky Background

<svg width="300" height="150">
  <defs>
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0ea5e9"/>
      <stop offset="50%" stop-color="#7dd3fc"/>
      <stop offset="100%" stop-color="#f0f9ff"/>
    </linearGradient>
  </defs>

  <rect fill="url(#skyGrad)" width="300" height="150"/>

  <!-- Sun -->
  <circle cx="250" cy="40" r="25" fill="#fbbf24"/>
</svg>

Metal Effect

<svg width="200" height="80">
  <defs>
    <linearGradient id="metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f5f5f5"/>
      <stop offset="30%" stop-color="#d4d4d4"/>
      <stop offset="50%" stop-color="#a3a3a3"/>
      <stop offset="70%" stop-color="#d4d4d4"/>
      <stop offset="100%" stop-color="#f5f5f5"/>
    </linearGradient>
  </defs>

  <rect fill="url(#metalGrad)" x="10" y="10" width="180" height="60" rx="5"
        stroke="#a3a3a3" stroke-width="1"/>
</svg>

Glass Effect

<svg width="200" height="100">
  <defs>
    <linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.1"/>
      <stop offset="51%" stop-color="#000000" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0.1"/>
    </linearGradient>
  </defs>

  <!-- Base color -->
  <rect x="10" y="10" width="180" height="80" rx="10" fill="#3b82f6"/>

  <!-- Glass effect -->
  <rect x="10" y="10" width="180" height="80" rx="10" fill="url(#glassGrad)"/>
</svg>

Logo Gradient

<svg width="200" height="60">
  <defs>
    <linearGradient id="logoGrad">
      <stop offset="0%" stop-color="#f43f5e"/>
      <stop offset="50%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
  </defs>

  <text x="100" y="45" text-anchor="middle" font-size="36" font-weight="bold"
        font-family="Arial" fill="url(#logoGrad)">
    LOGO
  </text>
</svg>

Next Steps

Now that you've mastered linear gradients, let's learn SVG Radial Gradient!