Image With Shadow – CSS

Hi friends,
Today I share one important topic related to CSS effect. Here I describe image box shadow using CSS3. Shadow is a powerful properties in CSS. CSS3 box-shadow properties allows you to create single or multiple, inner or outer drop-shadows. We can use these properties our site our needs. We can set the style in CSS like width,height,margin,image as background, size of background image, position,border,box-shadow etc.

CSS shadow with blur effect

Source Code

	
	
CSS box-shadow on all four sides
	

DEMO

CSS box-shadow on all four sides

CSS shadow with blur effect

Source Code

DEMO

Top-Right Box Shadow

Source Code

DEMO

CSS Box-Shadow:Inset (Inner Shadow)

Source Code

DEMO

CSS Shadow Right and Left Only

Source Code

DEMO

CSS Shadow Top and Bottom

Source Code

DEMO

CSS Bottom only Shadow

Source Code

DEMO

Div shadow right side

Source Code

DEMO

Bottom Right Box shadow

Source Code

DEMO

Bottom Left Box shadow

Source Code

DEMO

CSS Top Left Box shadow

Source Code

DEMO

Div shadow on Left Side only

Source Code

DEMO

CSS Box shadow on Top only

Source Code

DEMO

Rounded corner div with shadow

Source Code

DEMO

CSS Circle Shadow

Source Code

DEMO

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.