HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG Filters — drop shadow</title>
</head>
<body>
  <h1>SVG &lt;filter&gt; — drop shadow</h1>
  <svg width="240" height="160" viewBox="0 0 240 160" role="img" aria-label="Orange circle with drop shadow">
    <defs>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feOffset in="SourceAlpha" dx="0" dy="10" result="off" />
        <feGaussianBlur in="off" stdDeviation="8" result="blur" />
        <feColorMatrix in="blur" type="matrix"
          values="0 0 0 0 0
                  0 0 0 0 0
                  0 0 0 0 0
                  0 0 0 0.35 0" result="shadow" />
        <feMerge>
          <feMergeNode in="shadow" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <circle cx="120" cy="70" r="42" fill="#f97316" filter="url(#shadow)" />
  </svg>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Filters — drop shadow pipeline (Try It)