EverWeb Widgetbox

Image Box Shadow & Radius

Box Shadow

Image Radius Box Shadow

The CSS box shadow attribute is used here to create an all around shadow to give images a 3D effect.

Technically speaking, the horizontal and vertical offsets are left at zero and the shadow is applied using color, blur and spread.


In CSS the corner radius is actually expressed as border radius - even when there is no border. The value is normally expressed in pixels or ems but, in this case, a percentage is used.

The radius can be varied from zero to 50%. At maximum value, a square image will appear as a circle as shown below and a rectangular one will appear as an oval.

NOTE: As the shadow is applied, the image will move down and to the right in relation to the widget box. This is normal so do not readjust the box.

The shadow appears a lot darker than it really is when viewed on the EverWeb design canvas. Check the result in the browser by using the Preview button or by publishing to a local folder.

Image Box Shadow Widget
Get The Widget