I've done graphic design for many years and this applies to anything you want to make a drop shadow for, it requires 4 layers but the effect is flawless in appearance.

Excellent tip for applying this to css.

https://github.com/thomasloven/lovelace-card-mod

Instructions to add the modifiers to the cards are on the github page above. I added padding, margin and box-shadow by adding the following to card configurations:

style: |

ha-card {

margin: 1rem 0.5rem;

-webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);

-moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);

box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);

padding: 0.5rem 1rem;

font-size: 0.8rem;

}

Here is the tool I used to generate the markup for the shadows: https://www.cssmatic.com/box-shadow. Just make the adjustments and replace what I added above with what works best for you.

The theme I have enabled is what gives the rounded corners. You can find it here: https://github.com/basnijholt/lovelace-ios-dark-mode-theme

If want rounded corners and would rather keep your theme, you can add the following line between the curly braces (Or adjust the 20px to your liking.) in the card styling I listed above:

border-radius: 20px;

Edit: also, the card transparency is a part of that theme. You can get the same by adding something like this:

background-color: rgba(0, 0, 0, 0.25)

edit: Credit to u/basnijholt for the lovelace-ios-dark theme. Also to Thomas Lovén https://github.com/thomasloven for the tool.