box-shadow behaves differently on Safari

mr00z 0
Viewed 33

I'm trying to create multiple circular shadows on empty div using box-shadow property and I've got the desired effect on chromium browsers and Firefox, but Safari renders the same code differently - the shadows are more square-looking and colors are less intense in the center of shadow. Here's a comparison: Chrome vs Safari.

I'm basically doing this in css:

box-shadow: 20px 20px 40px 32.5px rgb(241, 238, 243),
    20px 20px 55px 50px rgb(218, 44, 204);

I made a full reproducible example here: https://jsitor.com/pI7ZoBvTQQ

Does anyone know how to make it look the same in all browsers?

EDIT: Adding -webkit prefix doesn't work

css
3 Answers

Try this:

-webkit-box-shadow: 20px 20px 40px 32.5px rgb(241, 238, 243),
    20px 20px 55px 50px rgb(218, 44, 204);
Meghna Bhuptani0

You can try this :

box-shadow: 20px 20px 40px 32.5px rgb(241, 238, 243),
    20px 20px 55px 50px rgb(218, 44, 204);
-webkit-box-shadow: 20px 20px 40px 32.5px rgb(241, 238, 243),
    20px 20px 55px 50px rgb(218, 44, 204);
Mecit Yücetürk0

Alright, it looks close enough (still not 1:1 though) to what I was trying to achieve if I add the following properties:

width: 1px;
height: 1px;
border-radius: 50%;

Seems like Safari have problems with figuring out the shape of div when it's not defined explicitly.

mr00z0
Related