Try it Yourself: SVG Drop Shadow

SVG Drop Shadow

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 140' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <filter id='softShadow' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceAlpha' stdDeviation='4' result='blurred'/>
      <feOffset in='blurred' dx='6' dy='6' result='shadow'/>
      <feMerge>
        <feMergeNode in='shadow'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>
  <rect x='30' y='30' width='120' height='70' rx='10' fill='#4f9dde' filter='url(#softShadow)'/>
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 140' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <filter id='softShadow' x='-50%' y='-50%' width='200%' height='200%'>
      <feGaussianBlur in='SourceAlpha' stdDeviation='4' result='blurred'/>
      <feOffset in='blurred' dx='6' dy='6' result='shadow'/>
      <feMerge>
        <feMergeNode in='shadow'/>
        <feMergeNode in='SourceGraphic'/>
      </feMerge>
    </filter>
  </defs>
  <rect x='30' y='30' width='120' height='70' rx='10' fill='#4f9dde' filter='url(#softShadow)'/>
</svg>

</body>
</html>