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
Note/Info
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.
- x-offset is the horizontal displacement(offset along the X-Axis) of the shadow of the box.
- 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; }
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; }
Using blur-radius in box-shadow
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; }
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; }
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
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; }
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; }
Using inherit in box-shadow
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*/ }
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;