Better Way to Create Inset/Outset Shadows

[The Missing Semicolon]

Hi,

I've attached a link to a fiddle in which I've attempted to create inset and outset with SkImageFilters. Is there a better way to generate this shadow effect, particularly the inset effect, without using a clip?

Link: https://fiddle.skia.org/c/3fd269cf110bf1cf4a037142e4eb90c7

Regards,
The Missing Semicolon

[paul....@gmail.com]

You can do it within the filter.

Comment out the clipRect() and change the last line of GetShadowFilter() to:

  return SkImageFilters::Blend(SkBlendMode::kSrcIn, nullptr, blurFilter, nullptr);

Here we are just blending the original rect with the shadow (blurFilter), masked to only include the parts of the shadow that are inside (SrcIn) the rectangle.

https://fiddle.skia.org/c/80ecad80c1406325775ed112f7bc50a1

Paul

[The Missing Semicolon]

Hi Paul,

Thank you for the suggestion and the Fiddle example. I’ve tested the approach, but it’s not working as expected for a box inset shadow. Specifically, it doesn’t take the spread radius into account, and the result doesn’t match the expected behaviour.

I’ve attached reference images for clarity. Let me know if you have thoughts on refining this further.

Regards,
The Missing Semicolon

[paul....@gmail.com]

Are you talking about the red border/lip around the outside?  That's caused by the scaling you have got in there.

I was not sure what it was there for, so I left it in.  Here's a version with it removed:

https://fiddle.skia.org/c/5b5cb64031306ef772bdc798dea177ed

Paul

[The Missing Semicolon]

Thank you for your reply. To achieve the CSS box-shadow inset effect, I am scaling the canvas, as this mimics the behaviour of the spread radius in a box-shadow. If I am not wrong, the spread radius, depending on its value, effectively increases or decreases the size of the shadow, which is why scaling the canvas is a suitable approach in this case. I hope this clarifies my method.

Regards,
The Missing Semicolon