i'm new to svg and am trying to create inner shadow kind of similiar to the attached pic. I've tried the other stack-overflow answers but the shadow doesn't seems to be as strong as the png attached. Can the experts suggest any possible way of achieving the same?

CodePudding user response：

We can use box-shadow with inset option.

<svg style="background: rgb(51,54,148); width: 439px; height: 419px; box-shadow: 0 0 15px 6px inset rgba(255,0,96,0.8)"></svg>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

That doesn't look like a normal inset shadow - the opacity is too high near the border. So you'll have to do some fancy filtering to duplicate it. Here's something that will work for any shape:

<svg width="600px" height="600px">
  <defs>
  <filter id="strong-inner">
    <feFlood flood-color="red"/>

<!-- This next operation subtracts the original shape from the red color 
field filling the filter region - which will give you a big color border 
surrounding the original shape -->
    <feComposite operator="out" in2="SourceGraphic" />

<!-- Next we want to expand the red border so it overlaps the space of the 
original shape - the radius 4 below will expand it by 4 pixels -->

    <feMorphology operator="dilate" radius="4"/>
    <feGaussianBlur stdDeviation="5" />

<!-- After blurring it, we want to select just the parts of the blurred, 
expanded border that overlap the original shape - which we can do by using 
the 'atop' operator -->

    <feComposite operator="atop" in2="SourceGraphic"/>
  </filter>
  </defs>
  
  <rect x="10" y="10" width="500" height="500" fill="rgb(50, 0 , 200)" filter="url(#strong-inner)"/>
</svg>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>