Jump to content

Drop Shadows on Images in Safari

Recommended Posts

Site URL: http://www.thepeak1group.com/home

Hi there,

I'm using the following CSS code (in Custom CSS under the Design tab, in a 7.0 Brine family site) to add drop shadows to specific images:


#BLOCK-ID-# { filter: drop-shadow(10px 10px 3px #a0a0a0)}

This works *perfectly* on Chrome and I never realized there were issues with it until working with a client this week who primarily uses Safari (I work on Chrome) -- he noticed that there were "breaks" in the drop shadows across the site where I'd used the code to create the shadows. I even tried a code to add drop shadows to ALL images universally (instead of using block IDs to isolate specific ones) and still ran into issues...but only on Safari.

Is there a fix for this? Or something that needs to get added/edited/removed from the code that would enable Safari to recognize it and implement it correctly? Or another code entirely that would help Safari read it correctly? This is my first time running into cross-browser issues.

Attaching an image from each browser for a "shadow break" example.

Thanks so much!

Safari Image.png

Chrome Image.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try this code

#BLOCK-ID-# { 
  -webkit-filter: drop-shadow(10px 10px 3px #a0a0a0); 
  filter: drop-shadow(10px 10px 3px #a0a0a0);


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.