Vector effects: gradients and filters in SVG

SVG offers a powerful set of vector effects that can elevate UI visuals without sacrificing performance. Gradients bring depth and motion to flat shapes, while filters enable subtle blurs, shadows, and color manipulations. In this practical guide, you’ll learn how to apply gradients and filters effectively in frontend projects, with small, copy-paste-ready snippets and links to deeper dives on SV Genius.

Why use gradients and filters in SVG?

Gradients and filters allow you to create scalable, device-agnostic visuals that stay crisp at any resolution. They are hardware-accelerated in modern browsers and can be composed with CSS or SVG attributes. For frontend developers, gradients are great for buttons, icons, and illustrations, while filters can simulate lighting, blur, or texture without bitmap assets—the classic recipe for fast, accessible UI.

Getting started with SVG gradients

Gradients in SVG are defined inside a <defs> block and then applied via fill or stroke. There are several types, with linear and radial being the most common.

Linear gradients

A linear gradient interpolates colors along a straight line. You can customize the start and end points with x1, y1, x2, y2, and color stops with <stop> elements.

<svg width="240" height="120" viewBox="0 0 240 120" role="img" aria-label="Linear gradient example">
  <defs>
    <linearGradient id="gradLinear" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#4f46e5"/>
      <stop offset="100%" stop-color="#06b6d4"/>
    </linearGradient>
  </defs>
  <rect width="240" height="120" fill="url(#gradLinear)" />
</svg>

Tip: use SV Genius: SVG Gradients for deeper explanations and examples.

Radial gradients

Radial gradients radiate from a focal point, creating circular color blends. Adjust cx, cy, r for position and size.

<svg width="240" height="120" viewBox="0 0 240 120" role="img" aria-label="Radial gradient example">
  <defs>
    <radialGradient id="gradRadial" cx="50%" cy="50%" r="60%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#22c55e"/>
      <stop offset="100%" stop-color="transparent" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <rect width="240" height="120" fill="url(#gradRadial)" />
</svg>

More on radial gradients at SVG Gradients.

Advanced gradient techniques

Two useful features unlock more expressive gradients: gradient units and gradient transforms.

gradientUnits and coordinate spaces

By default, gradient coordinates are in object bounding box space. Switching to userSpaceOnUse makes the gradient follow the SVG canvas coordinates, enabling complex compositions.

<svg width="300" height="150" viewBox="0 0 300 150" >
  <defs>
    <linearGradient id="gradUser" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="300" y2="150">
      <stop offset="0%" stop-color="#f59e0b"/>
      <stop offset="100%" stop-color="#ec4899"/>
    </linearGradient>
  </defs>
  <rect width="300" height="150" fill="url(#gradUser)" />
</svg>

Explore more on gradients at Gradient Units.

gradientTransform

Transforming a gradient allows rotation, scaling, or skewing without changing the shape geometry. This is handy for dynamic themes or decorative effects.

<svg width="260" height="140" viewBox="0 0 260 140" >
  <defs>
    <linearGradient id="gradRotate" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(45 130 70)">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#a78bfa"/>
    </linearGradient>
  </defs>
  <rect width="260" height="140" fill="url(#gradRotate)" />
</svg>

For practical patterns and recipes, see Gradient Transform.

SVG filters: subtle enhancements with impact

Filters in SVG are defined in a <filter> element and can be applied via the filter attribute on shapes. Start with simple operations like blur or drop shadow, then combine with compositing for more refined results.

Gaussian blur

A blur softens edges, creating depth or focus effects. Use feGaussianBlur with a standard deviation (stdDeviation) value.

<svg width="200" height="120" viewBox="0 0 200 120" >
  <defs>
    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" />
    </filter>
  </defs>
  <circle cx="60" cy="60" r="40" fill="#10b981" filter="url(#blur)" />
  <circle cx="120" cy="60" r="40" fill="#3b82f6" />
</svg>

Tip: combine blur with opacity and stroke to simulate depth. Learn more about practical filter presets at SVG Filters.

Drop shadow

Drop shadows can be created with a combination of feOffset and feGaussianBlur, plus feMerge to overlay the shadow beneath the original graphic.

<svg width="180" height="120" viewBox="0 0 180 120" >
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset dx="4" dy="4" in="SourceAlpha" result="off" />
      <feGaussianBlur in="off" stdDeviation="2" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect width="180" height="80" rx="8" fill="#f472b6" filter="url(#shadow)" />
</svg>

See real-world usage on our Shadow filter guide.

Composite operations

FeComposite lets you combine images with arithmetic or logical operations. This is useful for color-dodge-like effects or masking.

<svg width="240" height="120" viewBox="0 0 240 120" >
  <defs>
    <filter id="composite" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="b" />
      <feComposite in="SourceGraphic" in2="b" operator="in" />
    </filter>
  </defs>
  <circle cx="60" cy="60" r="40" fill="#22c55e" filter="url(#composite)" />
</svg>

To explore more combinations, visit our Filtration & Compositing resource.

Practical patterns: when to use gradients vs filters

Here are quick guidelines you can apply in real projects:

• Use gradients for backgrounds, icons with depth, and interactive hover states. They scale with the vector and preserve accessibility when contrast remains high.
• Use filters for subtle depth, focus cues, and realistic shadows. Prefer small blur radii on UI components to avoid visual noise.
• Combine gradients and filters carefully to avoid performance pitfalls on low-end devices. Profile with your browser’s dev tools.

Accessibility considerations

When gradients and filters are used, ensure sufficient contrast for text and important UI landmarks. SVG text and foreground elements should meet color contrast standards, and decorative effects should be removed for screen readers if they convey no essential information.

Tooling and workflow tips

Practical tips to integrate SVG gradients and filters into a frontend workflow:

• Center gradients on design systems by storing common gradient definitions in a shared <defs> file or component library.
• Leverage CSS variables to theme gradients and filters dynamically, enabling dark mode or brand color shifts.
• Inline small SVGs for component-level control or extract them into reusable components with props for colors and radii.

Further resources and exploration

If you want deeper dives, check out these SV Genius resources that complement this post:

• Vector effects overview
• SVG Gradients
• SVG Filters

For more hands-on examples, tutorials, and best practices, visit SV Genius and follow the SVG vector effects series.