Adding a shadow to images

Hi there,

Any chance you can link us to the site in question?

Do you want all the images to have shadows?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Did you need back end access?

I'm interested in adding a drop shadow to the main image on the home page (still building it out), but also on any other images I may use (excluding gallery images) on my site.

The best way to do this would be to add a custom class image-shadow to the image block.

Then add this CSS:

.wp-block-image.image-shadow img {
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Okay, great... but I don't understand how to add a "custom class to the image block."

Hi Charles,

Here's an example video on how to do it:
https://share.getcloudapp.com/Apu99NLR

The Additional CSS class(es) text field is on the "Advanced" accordion on the sidebar options when you're editing the image block.

Once you have followed the steps Elvin provided.

1. Go to Dashboard > Appearance > Customizer
2. Select the Additional CSS option.
3. Paste the CSS Code Leo provided in the code area:

https://www.screencast.com/t/JM246F9eE

Thanks for your reply... still no luck. Not sure what the problem is after
following the instructions and double-checking everything and re-inputting everything.

I created a custom class "image-shadow" to the image block...
Then added the CSS code following your screenshot directions above but still no shadow.

Is the CSS code I was given correct?

Hi Charles,

The CSS looks right.

Have you cleared cache after changes are made?

Let me know :)

How do you do that?

I use WordPress.

The shadow is actually there - just not very visible.

You can try something like this instead:
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Where would that go?
Please go into detail.

It would replace this line in my original CSS:
box-shadow: 0 3px 10px rgb(0 0 0 / 20%);

https://generatepress.com/forums/topic/adding-a-shadow-to-images/#post-1912106

Yes, that worked!

Thanks!

Although I changed the .75 value to .50

Looks good though.

No problem :)