SVG Stroke Gradients: How to Color an Outline with a Gradient

The short answer

An SVG stroke can be painted with a gradient, but not by typing a CSS gradient function into the stroke property. You define a gradient element, either linearGradient or radialGradient, inside the SVG, give it an id, and point the stroke at it with a url() reference. The same mechanism works for fills. This applies to vector shapes drawn with SVG elements such as path, circle, rect and line. It does not apply to a raster image embedded inside an SVG file, because that image has no stroke to paint.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <linearGradient id="ring" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ff6a00"/>
      <stop offset="1" stop-color="#7a2cff"/>
    </linearGradient>
  </defs>
  <circle cx="16" cy="16" r="12" fill="none" stroke="url(#ring)" stroke-width="4"/>
</svg>

Applying a stroke gradient with CSS

CSS can assign the gradient, but it still has to reference an SVG gradient element. Writing stroke: url(#ring) in a stylesheet or style attribute is valid. Writing stroke: linear-gradient(...) is not, because CSS gradient functions produce images, while the SVG stroke property accepts a color, none, or a reference to a paint server such as a gradient or pattern.

/* Works: references the SVG gradient by id */
.logo-ring { stroke: url(#ring); }

/* Does not work: CSS image gradients are not valid stroke paint */
.logo-ring { stroke: linear-gradient(45deg, #ff6a00, #7a2cff); }

The gradient colors themselves can be controlled from CSS, because stop-color is a styleable property. That lets you swap palettes, for example for a dark theme, without editing the gradient markup.

#ring stop:first-child { stop-color: #ff6a00; }
#ring stop:last-child  { stop-color: #7a2cff; }

@media (prefers-color-scheme: dark) {
  #ring stop:first-child { stop-color: #ffb37a; }
  #ring stop:last-child  { stop-color: #b48cff; }
}

SVG paint also allows a fallback color after the reference, such as stroke="url(#ring) #7a2cff". If the referenced gradient can't be found, the fallback color is used instead of the stroke disappearing.

Common pitfalls

• Straight horizontal or vertical lines may render with no visible stroke. By default, gradientUnits is objectBoundingBox, which maps the gradient to the shape's bounding box; a perfectly flat line has a zero-height or zero-width box, so the gradient can't be mapped. Setting gradientUnits="userSpaceOnUse" and giving x1, y1, x2, y2 in the SVG's own coordinates fixes this.
• The gradient runs across the shape, not along the path. A linear gradient sweeps in one direction across the bounding box; it does not follow the curve of a stroke from start to end. Effects that appear to flow along a path are usually approximations, such as splitting the path into segments with their own colors.
• currentColor can't carry a gradient. If a logo relies on currentColor to inherit the surrounding text color, switching that part to a gradient removes the inheritance.
• Duplicate ids break references. When several inline SVGs on one page each define a gradient with the same id, the browser may resolve every url() to the first one. Give each gradient a unique id.
• Transforms and scaling affect the result. With objectBoundingBox units the gradient stretches with the shape; with userSpaceOnUse it stays fixed to the coordinate system. Choose deliberately when a mark will be resized.

Stroke gradients in SVG favicons

Browsers that accept SVG favicons render gradient strokes the same way they render any other SVG paint, and a favicon file can include a prefers-color-scheme media query in its internal style block to adjust stop colors for light and dark browser themes. Whether this improves the icon is an editorial judgment rather than a technical one: at the sizes favicons are typically shown, a thin outline gives the gradient very little area, and subtle color transitions can read as a single muddy tone. Thicker strokes, high-contrast stops and a quick check at actual tab size help decide whether the gradient is worth keeping.

SVG favicon support is not universal across browsers and platforms, so a typical setup also provides raster fallbacks such as PNG or ICO files. Those fallbacks are flattened pixel images; the gradient is baked in and can no longer be edited. No browser-support figures were available for this article, so check current compatibility data before relying on an SVG-only favicon.

What this means for editable logo files

A stroke gradient stays editable only while the stroke remains a stroke. Design tools often offer to outline or expand strokes before export, which converts the line into a filled shape; the gradient may then be reapplied as a fill, split, or rasterized depending on the tool and export settings. A file ending in .svg is not proof of either outcome: it might contain live strokes with gradient references, outlined shapes, or an embedded bitmap with no vector paths at all. Opening the file in a code editor or vector application and looking for linearGradient or radialGradient elements and stroke attributes is the reliable way to confirm what you have.

If the logo belongs to someone else, being able to download and edit its SVG does not mean you have permission to change the artwork or use the mark; modification and trademark use are governed separately from file access.

Gaps in the available evidence

This overview relies on general, documented SVG behavior. No specific measurements, browser-support percentages, tool version details or rendering tests were supplied, so legibility at favicon sizes and behavior in particular design applications should be verified directly.