Fills, Strokes, and Markers

Linear Gradient Stop

A gradient definition lives inside defs, then a rectangle uses fill="url(#id)" to paint that gradient as its fill.

Program

SVG gradients are paint objects defined once and referenced by URL fragment. The defs block stores reusable paint, and shapes pull it in via the id.

linear_gradient_stop.html
Visuals: captured from real browser rendering
<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-label="Linear gradient">
  <defs>
    <linearGradient id="ramp" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#0ea5e9" />
      <stop offset="100%" stop-color="#4338ca" />
    </linearGradient>
  </defs>
  <rect width="360" height="220" fill="#f8fafc" />
  <rect x="40" y="56" width="280" height="108" rx="14" fill="url(#ramp)" />
</svg>

  1. Paint the viewport background.

    The viewport shows a pale background.
    Backgrounds make the gradient effect easy to see.

  2. Define a linearGradient inside defs.

    The viewport is unchanged because defs contents do not render directly.
    A gradient inside defs becomes paint that other shapes can reuse.

  3. Add the blue start stop.

    The viewport stays the same because no shape uses the gradient yet.
    A first stop pins one end of the color ramp.

  4. Add the indigo end stop.

    The viewport still does not show the gradient because nothing references it.
    A second stop closes the color ramp.

  5. Fill the panel with url(#ramp).

    A blue-to-indigo gradient fills the panel across the viewport.
    fill="url(#id)" tells the shape to paint with the named gradient.
linearGradient A linearGradient defines a horizontal or vertical color ramp.
stop A stop pins one color at a position inside the gradient ramp.
url() paint fill="url(#id)" makes a shape reuse a named paint definition.