Material Design Elevation Correct CSS

Question

I can't seem to find any official CSS code for all the box-shadows for elevation of cards for Material Design.

Calculating shadow values for all Material Design elevations

I've read these answers but they don't align with the box-shadow that Google is using on their search box on http://www.google.com when I do a quick inspection.

The box-shadow that Google is using on the search box is this CSS:

box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);

Is there an official CSS for all elevations?

Answer 1

According to https://material.io/design/environment/elevation.html by Google , Cards should have an elevation of 2dp when resting and 8dp when raised.

And according to https://pixplicity.com,

ldpi    @ 1.00dp    = 0.75px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
mdpi    @ 1.00dp    = 1.00px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
tvdpi   @ 1.00dp    = 1.33px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
hdpi    @ 1.00dp    = 1.50px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
xhdpi   @ 1.00dp    = 2.00px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
xxhdpi  @ 1.00dp    = 3.00px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt
xxxhdpi @ 1.00dp    = 4.00px    = 1.00sp    = 0.16mm    = 0.01in    = 0.45pt

Try using these conversions to get the box shadow size in css.

Note: On desktop, the resting elevation is 0dp

Answer 2

here you can find official guide for elevation: https://material.io/develop/web/components/elevation/

There is a library of styles you can install it like that: npm install @material/elevation