Blending a drop shadow seamlessly

I need to apply shadow to an overarching border, however so far I’ve created the shadow with CSS, and since the overarching border is formed by two boxes, the shadow overlaps.

My solution to this is to cover up the overlapping part with an image that looks like a seamless blend, however I’m not sure how the shadows should look, when they meet like that. Please see the blue circle area.

How would this part blend if it's a natural object? From an artistic standpoint?

How can I figure out how the natural shadow blend would look for an example like this?

I can use Adobe Photoshop or GIMP to achieve this.

Answer

Here is my solution. I think it is the only way to do it in CSS and get clean seams between the drop-shadows. I used the blue transparent boxes because the issue you would have run into with the internal shadow method is that the corner seams/shadow curvature wouldn’t have matched up where the green and black box meet.

enter image description here

Attribution
Source : Link , Question Author : eastboundr , Answer Author : John

Leave a Comment