EverWeb Widgetbox

Image Vignette Border

Inset Box Shadow

The vignetting effect is caused by wrong camera settings or lens limitations. It is also used as a creative effect to draw the viewer's attention more towards the center of the frame.

This widget creates the effect using an inset CSS box shadow.

The caption uses any one of 18 script style Google hosted fonts with a fallback to cursive.

Two Smurfs on a Scottish Beach at Sunset

Image Vignette Effect
vignette widget

The widget width and height need to be set using the Metrics inspector to maintain the correct aspect ratio of the image. Once this is done, check the box next to "Constrain proportions". Then the image size can be fine tuned using a drag handle.

Choose the image file and enter the caption text.

Select the font family, size and color.

Choose the shadow color and adjust the inset radius to get the desired effect.

The image corner radius can also be set or left at zero for square corners.

NOTE: Since this widget uses Google hosted fonts, make sure that only one or two are used per page. Otherwise the page download time will suffer.

Get The Widget