SVG Gradients, Patterns & Filters

linearGradient, radialGradient, drop shadows, and Gaussian blur

« SVG Paths & Bezier Curves« Previous HTML5 Canvas: Initializing the 2D Context »Next »

SVG provides graphic effects defined inside reusable <defs> containers, including linear/radial gradients, repeating patterns, and Gaussian blur drop shadows.

Defining and Referencing Gradients

<defs>: Stores non-rendered graphic assets and definitions.

<linearGradient id="...">: Specifies color stops (<stop offset="0%" stop-color="#..."/>).

Referencing: Apply gradients to shapes using fill="url(#gradientId)".

<filter id="shadow">: Uses <feDropShadow> or <feGaussianBlur> to apply cinematic glow and depth.

Linear Gradient Card Fill

Try It Yourself »

<svg width="200" height="100">
  <defs>
    <linearGradient id="neonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4f46e5" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>

  <rect width="200" height="100" rx="10" fill="url(#neonGlow)" />
</svg>

linearGradient transitions smoothly from indigo to pink.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Where should reusable graphical assets like `<linearGradient>` and `<filter>` be defined in an SVG document?

« Previous: SVG Paths & Bezier Curves Next: HTML5 Canvas: Initializing the 2D Context »