CSS box-shadow property
Description
CSS box-shadow drops a shadow of a box. The shadow may be either inside or outside of a box.
Syntax
box-shadow : none | X-offset Y-offset blur-radius spread-distance shadow-color [ inset ]
Property values
none
-
There is no shadow.
box-shadow: none;
Property values
X-offset value
-
It represents the offset of shadow along X-axis. right (+ve value) or left (-ve value) offset.
box-shadow: 5px;
Y-offset value
-
It represents the offsetof shadow along Y-axis. bottom (+ve value) or top (-ve value) offset.
box-shadow: 4px;
blur-radius value (+ve)
-
It blurs the shadow. This value can't be negative.
box-shadow: 6px;
spread-distance value
-
It expands the box-shadow in all directions.
box-shadow: 4px;
shadow color
-
It specifies the color of box shadow.
box-shadow: rgba(255,0,0,1);
outer shadow
If inset keyword is not applied, it shows outer box shadow.
box-shadow: ;
inner shadow
-
This 'inset' keyword transforms the box-shadow from outer side to inner side.
box-shadow: inset;
Applicable to
It applies to all elements
From web4college, the free CSS digger
