The effects section of Responsive Site Designer allows you to cast a drop shadow from the frame of almost every element. The Box Shadow settings provide you with multiple values, which can be altered to change the display of the drop shadow.

Values

Color

The color preference defines which color the drop shadow will have. Using the color selection window, you can select the color you wish to use by using the built-in color slider, or by typing in the Hex, RGB or HSB. Another cool feature of the color preference is that you can set an opacity. The opacity can give you a see through the effect that can come in handy!

Offset X & Offset Y

The X and Y offset are length values that specify the horizontal (x) and the vertical (y) distance. You can also apply a negative value, for placement to the left and above the element.

Blur Radius

The blur-radius is the third length value. The larger the number used, the bigger and lighter the shadow becomes.

Inset/Outset

When using an inset shadow, the content will appear depressed inside of the box, which allows the shadow to be drawn inside of the border. However, an outset shadow will allow you to raise the box above the content, giving it that pop off the page look.

Examples:

There are many different configurations that you can accomplish with Box Shadow. Listed here are just a few of them. Download the following project to see them in action.

Box Shadow Examples
Standard Box shadow
Standard Box shadow example
Inner Box shadow
Inner Box shadow example
Single Side Box shadow
Single Side Box shadow example
Full Box shadow
Full Box shadow example