11

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?

Community
  • 1
  • 1
Tn Hn
  • 301
  • 2
  • 3
  • 8
  • Could you please be more specific, which elevetion guidelines to you want, it it for cards, buttons, or .....Also the official guidelines can be found at https://material.io/guidelines/components/cards.html#cards-content-blocks ("cards in this case") – Collins Abitekaniza Jan 05 '17 at 21:09
  • @CollinsA It is for cards I'm interested in, updated the question – Tn Hn Jan 09 '17 at 08:19

3 Answers3

4

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

enter image description here

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

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Collins Abitekaniza
  • 4,496
  • 2
  • 28
  • 43
  • Elevation is not the problem, it's where the shadow is cast and by how many pixels on each side of the card. – Tn Hn Jan 11 '17 at 09:54
3

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

Akmal Anvarov
  • 31
  • 2
1

For all shadows, you can use the material-components-web library which uses SCSS to generate the CSS classes. Demo and other resources are here.

See link for full details, however the variables are:

$mdc-elevation-baseline-color: black;
$mdc-elevation-umbra-opacity: .2;
$mdc-elevation-penumbra-opacity: .14;
$mdc-elevation-ambient-opacity: .12;

$mdc-elevation-umbra-map: (
  0: "0px 0px 0px 0px",
  1: "0px 2px 1px -1px",
  2: "0px 3px 1px -2px",
  3: "0px 3px 3px -2px",
  4: "0px 2px 4px -1px",
  5: "0px 3px 5px -1px",
  6: "0px 3px 5px -1px",
  7: "0px 4px 5px -2px",
  8: "0px 5px 5px -3px",
  9: "0px 5px 6px -3px",
  10: "0px 6px 6px -3px",
  11: "0px 6px 7px -4px",
  12: "0px 7px 8px -4px",
  13: "0px 7px 8px -4px",
  14: "0px 7px 9px -4px",
  15: "0px 8px 9px -5px",
  16: "0px 8px 10px -5px",
  17: "0px 8px 11px -5px",
  18: "0px 9px 11px -5px",
  19: "0px 9px 12px -6px",
  20: "0px 10px 13px -6px",
  21: "0px 10px 13px -6px",
  22: "0px 10px 14px -6px",
  23: "0px 11px 14px -7px",
  24: "0px 11px 15px -7px"
);

$mdc-elevation-penumbra-map: (
  0: "0px 0px 0px 0px",
  1: "0px 1px 1px 0px",
  2: "0px 2px 2px 0px",
  3: "0px 3px 4px 0px",
  4: "0px 4px 5px 0px",
  5: "0px 5px 8px 0px",
  6: "0px 6px 10px 0px",
  7: "0px 7px 10px 1px",
  8: "0px 8px 10px 1px",
  9: "0px 9px 12px 1px",
  10: "0px 10px 14px 1px",
  11: "0px 11px 15px 1px",
  12: "0px 12px 17px 2px",
  13: "0px 13px 19px 2px",
  14: "0px 14px 21px 2px",
  15: "0px 15px 22px 2px",
  16: "0px 16px 24px 2px",
  17: "0px 17px 26px 2px",
  18: "0px 18px 28px 2px",
  19: "0px 19px 29px 2px",
  20: "0px 20px 31px 3px",
  21: "0px 21px 33px 3px",
  22: "0px 22px 35px 3px",
  23: "0px 23px 36px 3px",
  24: "0px 24px 38px 3px"
);

$mdc-elevation-ambient-map: (
  0: "0px 0px 0px 0px",
  1: "0px 1px 3px 0px",
  2: "0px 1px 5px 0px",
  3: "0px 1px 8px 0px",
  4: "0px 1px 10px 0px",
  5: "0px 1px 14px 0px",
  6: "0px 1px 18px 0px",
  7: "0px 2px 16px 1px",
  8: "0px 3px 14px 2px",
  9: "0px 3px 16px 2px",
  10: "0px 4px 18px 3px",
  11: "0px 4px 20px 3px",
  12: "0px 5px 22px 4px",
  13: "0px 5px 24px 4px",
  14: "0px 5px 26px 4px",
  15: "0px 6px 28px 5px",
  16: "0px 6px 30px 5px",
  17: "0px 6px 32px 5px",
  18: "0px 7px 34px 6px",
  19: "0px 7px 36px 6px",
  20: "0px 8px 38px 7px",
  21: "0px 8px 40px 7px",
  22: "0px 8px 42px 7px",
  23: "0px 9px 44px 8px",
  24: "0px 9px 46px 8px"
);
Robert Stiff
  • 29
  • 2