How to modify this so the bottom isn't so dark

[damian5000]

This is supposedly based on Google material, but for me, the bottom is just too dark and long. I’ve tried messing with the numbers and just can’t get it right, because any changes also affect the sides.

I want the bottom to closer match the sides. Maybe not exactly, to add depth, but not so dramatically different as it is now.

https://codepen.io/damian5000/pen/wprRWw

There’s also something seriously wrong with this forum. See this img (https://i.imgur.com/XkvrWCd.png). I’m on latest version of Chrome.

Regards

[Beverleyh]

Not sure what you mean but try one of the many online generators you can find online by Googling “box-shadow generator”. Many will have sliders you can drag about to get the look you’re after.

[DidierAubin87]

I can not understand your question. can you clear it?

[Jemima Abu]

Maybe you could try using just one property for the box-shadow.
Instead of

.shadow {
box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

You could try something like

.shadow {
    box-shadow: 1px 3px 6px 1px rgba(41, 40, 40, 0.22);
}

[Author]

Posts