Box Shadow

lets discuss a css property called box-shadow.

As we will see and some us might already know that box-shadow property is used to create sharp looking buttons, boxes and html elements using css.

The basic syntax is as follows

// 1. when no box shadow is to be applied.
{
  box-shadow : none;
}

There other properties like

1. h-offset : positive value like 10px will create shadow at the right side and negative value like -10px will create shadow at left side of the box.
2. v-offset : positive value like 10px will create shadow at the bottom and negative value like -10px will create shadow towards top of the box.
3. blur : optional, as the value becomes positive the shadow becomes blurrier
4. spread : optional, as the value becomes positive the show becomes wider.
5. color : color of the shadow.

// 2. other properties
{
  box-shadow : h-offset  v-offset  blur spread color;
}

Some more properties

1. inset : Inverts the shadow, like the shadow towards inside of the box. It inverts the h-offset, v-offset values as well.

// 3. It can also take values such as inset, initial and inherit
{
   box-shadow : h-offset  v-offset  blur spread color |  inset | initial | inherit;
}

Best part is you do not have to remember any of the values all thanks to Box-shadow. Try out all the combinations with real time changes and copy the code.