CSS — Box Shadow
Published in
2 min readAug 15, 2022
The box-shadow CSS property adds shadow effects around an element's frame. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Adding a simple shadow:
We need to define the X offset, Y offset, and Shadow Color
box-shadow: 60px -16px teal;
Add blur to the shadow:
We need to define the X offset, Y offset, Blur Radius, and Shadow Color
box-shadow: 10px 5px 5px black;
Add spread to the shadow:
We need to define the X offset, Y offset, Blur Radius, Spread Radius, and Shadow Color
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.2);
Adding multiple shadows:
box-shadow: 3px 3px red, -1em 0 0.4em olive;
Have fun playing with box-shadow and dig even deeper in the same property by using our good friend Google ;)
Instructor ~ TARUN KUMAR