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?
2 Answers
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>
-
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– diopsideCommented 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...– diopsideCommented 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.– LeonidCommented Nov 2, 2021 at 11:28
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>