Would like to add a CSS inner shadow overlay to Image Blocks

Store Design
1

Hello All,

I would like to add an inner/inset shadow to image blocks on the site. Attempting to set CSS with a consistent shadow on all sides to create a “window box” like effect. I am not certain where to place/test the following code.

box-shadow: 2px 0px 71px 0px rgba(0,0,0,0.33) inset;
-webkit-box-shadow: 2px 0px 71px 0px rgba(0,0,0,0.33) inset;
-moz-box-shadow: 2px 0px 71px 0px rgba(0,0,0,0.33) inset;

Here is a guide I have found - https://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/

2

@AWB75

Please share your store URL!

Thanks!

3

Thanks! Forgot to add this -

https://fuwafuwa-studios.myshopify.com/

4

@AWB75

Your store is password protected share your storefront password and share the screenshot of what you want.

5

password = ohzist

Here is an example from the front page using Photoshop to create the inner glow. Thanks for your patience with this.

AWB75_0-1690423501687.png
AWB75_0-1690423501687.png504×499 233 KB

6

@AWB75

Please remove the shadow image and add a simple image without the shadow.

7

Updated with a simple image

8

@AWB75

Please add the following CSS code to your assets/theme.css bottom of the file.

.content-over-media:before {
    box-shadow: 2px 0px 97px 0px rgba(0,0,0,3.33) inset;
    -webkit-box-shadow: 2px 0px 97px 0px rgba(0,0,0,3.33) inset;
    -moz-box-shadow: 2px 0px 97px 0px rgba(0,0,0,3.33) inset;
}

Thanks!