CSS — Box Shadow

CSS- Box Shadow

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;

Adding a simple box-shadow

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;

Adding Blur Radius to box-shadow

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 Spread Radius to box-shadow

Adding multiple shadows:

box-shadow: 3px 3px red, -1em 0 0.4em olive;

Adding multiple shadows

Have fun playing with box-shadow and dig even deeper in the same property by using our good friend Google ;)

Get TARUN KUMAR’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Instructor ~ TARUN KUMAR

LAZY SYNTAX