Top layer has all 3 RGB channels 0 in this case ⇒ black inner shadow.

We paint it orangey using feColorMatrix as detailed here https://mastodon.social/@anatudor/112157559510002242

Finally, we put it on top of SourceGraphic (bottom layer in2 input). This is done with the default (normal) mode for feBlend.

#svg #filter #svgFilter #blending #compositing #blendMode #alpha #inset #shadow #css #code #coding #web #dev #webDev #frontend #webDevelopment

While I've seen the rare #SVG solution among the SO answers, I found those filters to be too complicated. So here's a much simpler SVG version, step by step 👆

Live demo https://codepen.io/thebabydino/pen/gOBxmOZ also for this week's #CodePenChallenge

No wrapper, no losing right click menu on img if not setting `pointer-events: none` on element on top of img in z order.

#CodePen #css #filter #svgFilter #shadow #inset #code #coding #frontend #web #dev #webDevelopment #webDev