CSS box-shadow property

Property values

none

There is no shadow.

box-shadow: none;

Try it { }

Property values

X-offset value

5

It represents the offset of shadow along X-axis. right (+ve value) or left (-ve value) offset.

box-shadow: 5px;

Try it { }

Y-offset value

4

It represents the offsetof shadow along Y-axis. bottom (+ve value) or top (-ve value) offset.

box-shadow: 4px;

Try it { }

blur-radius value (+ve)

6

It blurs the shadow. This value can't be negative.

box-shadow: 6px;

Try it { }

spread-distance value

4

It expands the box-shadow in all directions.

box-shadow: 4px;

Try it { }

shadow color

It specifies the color of box shadow.

box-shadow: rgba(255,0,0,1);

Try it { }

outer shadow

If inset keyword is not applied, it shows outer box shadow.

box-shadow: ;

Try it { }

inner shadow

This 'inset' keyword transforms the box-shadow from outer side to inner side.

box-shadow: inset;

Try it { }