Box shadow , one side shadow , rounded corner shadow ...

CSS Shadow

Box-shadow is a pretty powerful property in CSS. CSS3 box-shadow properties allows you to create single or multiple, inner or outer drop-shadows. The box-shadow property requires you to set the horizontal & vertical offsets and then you can set optional blur and colour. You can create outset (default) as well as inset shadows.

Syntax

Here is what a box-shadow declaration looks like:

The above CSS code creates a Box with shadows ( css3 shadow effect ) on Top and right side. You can see so many css3 shadow examples in this lesson.

CSS box-shadow on all four sides

The following CSS code create a box Shadow appears equally on all four sides.


CSS3 Div with four-sided drop shadow

CSS3 shadow generator

CSS shadow with blur effect

The blur radius property is optional, the larger this value, the lighter the shadow.

Syntax

In the above code set blur value as 5px.

div shadow

Source Code

Top-Right Box Shadow

CSS Code

Top-Right Box Shadow with Blur effect


Top right shadow with 5px blur

CSS Box-Shadow:Inset (Inner Shadow)

The Inset property of box-shadow create the shadow inset.



CSS Shadow Right and Left Only


CSS Div with right and left shadow

CSS Shadow Top and Bottom


CSS Div shadow top and bottom

Rounded corner div with shadow

CSS Code

CSS Circle Shadow

CSS shadow

CSS Code

CSS Bottom only Shadow

We can create one side only shadow in CSS, the following code shows how to create bottom side only shadow on a div.

CSS Code

Div shadow right side

CSS Code

Bottom Right Box shadow

CSS div shadow

CSS Code

Bottom Left Box shadow

CSS Code

CSS Top Left Box shadow

CSS box shadow

CSS Code

Div shadow on Left Side only

CSS Code

CSS Box shadow on Top only

CSS Code