4

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?

enter image description here

2 Answers 2

3

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>

6
  • can you explain what you mean by "the opacity is too high near the border"? This is an interesting approach but i dont think im seeing what it does differently compared to the other answer
    – diopside
    Commented Nov 1, 2021 at 20:06
  • Well two things: it works on any shape (filled path, circle etc.) not just a rect. And the shadow color is fully opaque at the border. You can see this more clearly if you increase the radius of the feMorphology. Commented Nov 1, 2021 at 20:23
  • yeah it definitely seems its the way to go for non-rect shapes, but just for rectangles, an inset box shadow w/ the right spread appears to achieve virtually identical results. i'll have to experiment more though...
    – diopside
    Commented Nov 1, 2021 at 20:39
  • this works for me for smaller stdDeviation but with larger values (ex. 30). The opacity still becomes lower. Commented Nov 2, 2021 at 10:19
  • Great solution!!! By the way, if saying "normal inset shadow" is about css drop-shadow than we have 4-th numeric option for fully opaque offset from border.
    – Leonid
    Commented Nov 2, 2021 at 11:28
2

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.