Bad shadow export result

Ask the community
1

Hi I need to make a shadow asset:
here’s the CSS generated:

/* popup_shadow */


position: absolute;
width: 40px;
height: 40px;

background: #FFFFFF;
box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.3);
border-radius: 0px;

and here’s the exported SVG:

<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_94_35)">
<path d="M9 7H49V47H9V7Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_94_35" x="0" y="0" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_94_35"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_94_35"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_94_35" result="shape"/>
</filter>
</defs>
</svg>

This is the result PNG (@1x):

Here’s is the PNG exported using Inkscape from the SVG:

If you open, both PNG’s in an image viewer and compare them, you’ll notice that Figma’s is blocky and pixelated, while Inkscape’s is smooth:

shadow_inkscape_vs_figma

Is there a fix for this ? Thanks !

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.