SVG Gradient Stops and Colors: How offset and stop-color Work

The short answer

In SVG, a gradient is defined by a linearGradient or radialGradient element that contains two or more stop elements. Each stop pins one color to one position. The offset attribute sets the position, and stop-color sets the color. stop-opacity sets the color's transparency. The renderer blends smoothly between neighboring stops. This is the mechanism behind gradient fills in vector logos and SVG favicons.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <linearGradient id="brand-fill" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ff6a00"/>
      <stop offset="0.6" stop-color="#ee0979"/>
      <stop offset="100%" stop-color="#5b2be0" stop-opacity="0.9"/>
    </linearGradient>
  </defs>
  <rect width="32" height="32" rx="6" fill="url(#brand-fill)"/>
</svg>

The hex values and positions above are illustrative only. They do not represent any particular brand.

What the stop offset attribute controls

The offset is a position along the gradient vector. For a linear gradient, the vector runs from the start point (x1, y1) to the end point (x2, y2). For a radial gradient, it runs outward from the focal point to the edge of the circle. You can write an offset as a plain number from 0 to 1 or as a percentage from 0% to 100%. Both forms mean the same thing, so 0.5 and 50% are equivalent.

• Values below 0 or above 1 (or outside 0% to 100%) are clamped to the nearest end of the range.
• If offset is omitted, it defaults to 0.
• Stops are read in document order, and their offsets must not decrease. If a stop's offset is smaller than an earlier stop's, it is treated as equal to the largest earlier offset.
• Two consecutive stops with the same offset produce a hard edge instead of a blend. This is how stripes or banded effects are built from a gradient.
• With the default spreadMethod of pad, the first stop's color fills everything before it and the last stop's color fills everything after it.
• A gradient with a single stop paints a solid color. A gradient with no stops paints nothing.

Offsets are relative to the gradient vector, not to the drawing itself. Where a given offset lands on screen therefore depends on the gradient's coordinates and its gradientUnits setting. The default is objectBoundingBox, which maps 0 to 1 onto the bounding box of the shape being filled. With userSpaceOnUse, the vector is measured in the SVG's own coordinate system. This matters when one gradient is shared across shapes of different sizes. With bounding-box units, each shape gets its own stretched copy. With user-space units, every shape samples a single continuous gradient.

How stop-color and stop-opacity set the color

stop-color accepts a CSS color value, such as a hex code, a named color, an rgb() or hsl() function, or currentColor. If it is not set, it defaults to black. stop-opacity takes a value from 0 to 1 and defaults to 1. If the color value already includes an alpha channel, stop-opacity multiplies with it rather than replacing it.

Both are presentation attributes and also CSS properties. That means a stylesheet rule targeting the stop elements can override the attribute values written in the markup. This makes theming possible, such as swapping gradient colors for a dark-mode favicon through a media query inside the SVG. It also means a stop can display a different color than its attribute suggests if any CSS is in play. Renderer support for newer CSS color syntaxes varies, so plain hex or rgb() values are the conservative choice for files that must display consistently.

Attribute	Accepts	Default	What it does
offset	Number 0–1 or percentage 0%–100%	0	Positions the stop along the gradient vector
stop-color	CSS color value	black	Sets the color at that position
stop-opacity	Number 0–1	1	Sets the transparency at that position

Practical implications for favicons and logo files

A gradient that reads well at logo size can lose its effect at favicon scale. At very small pixel dimensions, closely spaced stops or subtle color shifts may collapse into one muddy tone or show visible banding. Wider spacing between offsets and stronger contrast between stop colors usually hold up better. This is a design judgment rather than a fixed rule, and checking the icon at the sizes it will actually display is the reliable test.

Many favicon setups also ship raster fallbacks, such as PNG or ICO files, alongside or instead of the SVG. Those fallbacks are pixel images. Once a gradient is exported to them, the stops, offsets and colors are no longer editable values, just colored pixels. Any change to the gradient has to be made in the SVG source and exported again.

Gradients are referenced by id, as with fill="url(#brand-fill)" in the example above. When several SVGs are inlined into one HTML page, duplicate ids can cause one icon to pick up another icon's gradient. Giving each gradient a distinctive id avoids this.

Checking whether a gradient is actually editable

A .svg extension does not guarantee that the gradient is built from stop elements. Some SVG files simply wrap an embedded raster image, and in those files the gradient is baked into the pixels. Opening the file in a text editor or a vector application shows which case applies. Look for linearGradient or radialGradient elements with stop children, as opposed to an image element carrying embedded data.

If the file belongs to someone else's brand, editable stops are a technical question, not a permission question. Being allowed to download a logo does not by itself grant the right to change its colors or use its trademark in a modified form.

Evidence note

No subject-specific evidence was supplied for this article, such as browser test results, rendering measurements or brand specifications. The behavior described here reflects the general SVG specification for gradient stops. How a particular browser, operating system or design tool renders a given gradient, especially at favicon sizes, should be confirmed by testing in the target environments.