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


#CSS digger
Was this article helpful?

 
box-shadow: x-offset y-offset blur-radius spread-distance shadow-color [inset]
×

Ctrl+D