CSS box shadow

Prev
Next

CSS Box Shadow

So, before we proceed further, first off all let us understand –

What is Box Shadow?

The Box-shadow is same as border shadow property and it adds shade around the borders.

box-shadow uses these following attributes –

  • x-offset
  • y-offset
  • color
  • blur-radius
  • spread-radius
  • inset
  • initial
  • inherit
  • none

Examples of CSS Box-shadow

CSS border shadow. The element is surrounded by horizontal and vertical box shadow with outlet position.

CSS border shadow. The element is surrounded by horizontal and vertical box shadow with inset position. This is a perfect example of inset border CSS.

Using x-offset and y-offset in box-shadow

x-offset and y-offset are mandatory for border-shadow.

  1. x-offset is the horizontal displacement(offset along the X-Axis) of the shadow of the box.
  2. y-offset is the vertical displacement(offset along the Y-Axis) of the shadow of the box.
Syntax of Box-shadow(Type-1):

box-shadow: x-offset y-offset;

  • If x-offset > 0, then the shadow will be towards the right-hand side of the box.
  • If the x-offset< 0, then the shadow will be towards the left-hand side of the box.
  • If y-offset > 0, then the shadow will be towards the bottom side of the box which means the shade will be below the box.
  • y-offset<0, then the shadow will be towards the top side of the box which means the shade will be at the top of the box.

Example of shadow box(Type 1) - using only x-offset and y-offset Link 

#box-border-l {
  border: 2px solid red;
  padding: 10px;
  box-shadow: 20px 05px;
}

#box-border-2 {
  border: 4px solid green;
  padding: 10px;
  box-shadow: -20px -10px;
}
Run the Code

Using color in box-shadow

color is always optional in box-shadow. color defines the color of the shadow and by default, it takes the color of the text.

Syntax of Box-shadow(Type-2):
box-shadow: x-offset y-offset color;

Example of shadow box(Type 2) - with color

#box-border-color {
  border: 2px solid red;
  padding: 10px;
  box-shadow: 5px 10px yellow;
}
Run the Code

Using blur-radius in box-shadow

blur-radius is always optional in box-shadow. blur-radius makes the shadow little dim and hazy. To make shadow hazier, give a higher value of blur-radius. Sometimes, we often forget about box shadow opacity which is opacity of box. How much less transparent the box of shadow is? Normally, Box Shadow opacity can be controlled by color attribute of box shadow but you should change the value of blur-radius to see its effect on box shadow opacity.

Syntax of Box-shadow(Type-3):
border-shadow: x-offset y-offset blur-radius color;

Example of shadow box(Type 3) - with a blur radius

#box-border-blur-color {
  border: 2px solid tomato;
  padding: 10px;
  box-shadow: -20px -10px 5px pink;
}
Run the Code

Using spread-radius in box-shadow

spread-radius is always optional in box-shadow and it makes the shadow bigger or smaller. 

To make shadow bigger, give a higher value of spread-radius.

Syntax of Box-shadow(Type-4):
box-shadow: x-offset y-offset blur-radius spread-radius color;

Example of shadow box(Type 4) - with spread radius

#box-border-spread1-color {
  border: 2px solid tomato;
  padding: 10px;
  box-shadow: 20px -10px 12px 25px pink;
}

#box-border-spread2-color {
  border: 3px solid blue;
  padding: 10px;
  box-shadow: -30px 15px 15px -20px green;
}
Run the Code

Using multiple values separated by commas in box-shadow

The box-shadow might contain multiple values as well. To do this, just separate each values with commas as shown below-

Syntax of Box-shadow(Type-5):
box-shadow: x-offset y-offset, x-offset y-offset color, x-offset y-offset blur-radius color;

Note: This is not a general syntax, rather it is like an example of how the syntax of multiple shadows can come by using commas

shadow box with multiple shadows

Example of shadow box(Type 5) - with multiple shadows

.box-multiple-values {
  border: 5px solid aqua;
  background-color:pink;
  padding: 10px;
  box-shadow:5px 8px, 1em -5px 8px rgba(0, 1, 0.4, 0.6), 10px 5px 6px 4px orange;
}
Run the Code

Using inset in box-shadow

Inset is always optional and will create a shade from the outer side towards the inner side.

Syntax of Box-shadow(Type-6):
box-shadow: x-offset y-offset blur-radius spread-radius inset color;

Example of shadow box(Type 6) - with inset

#box-border-inset-color {
  border: 20px solid powderblue;
  padding: 10px;
  box-shadow: 15px 10px 15px 20px inset orange;
}
Run the Code

Using inherit in box-shadow

Inherit is always optional and will acquire(get) the attributes and properties from its parent.

Syntax of Box-shadow(Type-7):
box-shadow: inherit;

Example of shadow box(Type 7) - with inherit

.parent {
  border: 5px solid green;
  background-color:pink;
  padding: 10px;
  box-shadow:10px 5px 10px yellow;
}

.child {
  border: 3px solid blue;
  background-color:red;
  padding: 10px;
  box-shadow: inherit; /*optional as it already acquires parent property in this case*/
}
Run the Code

Using initial in box-shadow

Initial is always optional.

Suppose, you want to set the box shadow to its initial default value.

Syntax of Box-shadow(Type-8):
box-shadow: initial;

Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!