1/* Card Shadow with 2 layers */
2.has-shadow{
3 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
4}
5
1/*// https://html-css-js.com/css/generator/box-shadow
2--------------------------------------------------------------*/
3-webkit-box-shadow: 5px 5px 15px 5px #000000;
4 -moz-box-shadow: 5px 5px 15px 5px #000000;
5 box-shadow: 5px 5px 15px 5px #000000;
6
7/*// offset-x | offset-y | blur-radius | spread-radius | color
8box-shadow: 5px 5px 15px 5px #000000;
9--------------------------------------------------------------*/
1/* offset-x, offset-y, (blur-radius and/or spread-radius=optional) and color */
2selector {
3 box-shadow: offset-x offset-y (blur-radius and/or spread-radius=optional) color;
4}
5
6/* Example */
7.test-shadow {
8 box-shadow: 4px 4px 20px 0px #0000003d;
9}
10
11
12
1// original
2box-shadow: 10px 10px 8px 10px #888888;
3
4// html attribute
5style="box-shadow: 10px 10px 8px 10px #888888;"
1/* offset-x, offset-y, (blur-radius and/or spread-radius=optional) and color */
2selector {
3 box-shadow: offset-x offset-y (blur-radius and/or spread-radius=optional) color;
4}
5
6/* Example */
7.test-shadow {
8 box-shadow: 4px 4px 20px 0px #888888;
9}
10
11
12
1/*--- box shadow ---*/
2box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);