Skip to main content
Question

Bad shadow export result

  • February 1, 2022
  • 1 reply
  • 1341 views

amjadhedhili

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 !

This topic has been closed for comments

1 reply

  • 0 replies
  • March 3, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings