Search within TutorialsPark

CSS Box Shadow


Use CSS3 box-shadow property to drop shadows for elements.


CSS Box Shadow

1. Just like text elements, you can add drop shadows to elements using CSS3 property of box-shadow

The Syntax for box-shadow property is.

box-shadow: H-offset V-offset blur spread color inset ;

Tables: Values for CSS box-shadow property

Property Description value
H-offset Horizontal offset, a positive value positions the shadow to the right and a negative value positions shadow to the left. pixels(px)
em
cm
V-offset Vertical offset, a positive value positions shadow at the top, negative value positions shadow at the bottom. pixels(px)
em
cm
blur Set the blur radius, higher the value more blur is the edge of the box.Negative value not allowed.(Optional) pixels(px)
em
cm
spread Sets the spread radius , positive value expands shadow in all direction, negative value contracts shadow towards the box.(Optional) pixels(px)
em
cm
color Sets the color for the shadow, if not specified browser will select a default color.(optional) hex
rgba
hsla
inset Makes the shadow to inset inside the box.(optional) inset


Setting the width of the Border Images

Demo: CSS Border Image Shorthand

I have never let my schooling interfere with my education.

box-shadow:


1.To set an element's box-shadow property , simply provide all the values with a space in between ( no comma)

CSS Example : box-shadow property

Give it a TRY! » Note: Positve Y-offset creates top drop shadows while negative value creates reverse shadows


Creating positive and negative insets with Shadows

Demo: CSS Inset(+ive and -ive)

I have never let my schooling interfere with my education.

box-shadow:


1.You can create inset shadows inside the elements by using the keyword inset.

2. By setting positive offset you create positive and negative inset by setting negative values for offset(both x and y)

Example: CSS box-shadow inset

Give it a TRY! »


Handling the Spread for Box Shadow

I have never let my schooling interfere with my education.

box-shadow:


1.The extent to which the shadow color should spread is set by specifying the value for spread within box-shadow property .

Example: CSS Box-Shadow spread

Give it a TRY! » Note: If the spread is smaller than the offset values it remains on the same side as shadow, and if greater is spreads in all directions.


CSS Multiple Box Shadows

Buy land, they're not making it anymore.

box-shadow:


1.You can create multiple box-shadow for an element seperated by comma to create great effects for borders.

2. The way to create multiple border is to just specify the spread and rest all other offset and blur values as zero.

Example: CSS Box-Shadow multiple borders

Give it a TRY! » Note: Mutiple borders have spread value incremented by a specific value.