Web Code Globe Web Code Globe


WebCode supports shadows for fills, strokes and text. It also supports inner shadows for fill. Both are very useful for simulating plasticity in your drawings. Shadows depend on the color they use. If such color is adjusted, the derived shadow is updated accordingly.

Using a shadow

Setting a shadow To use a shadow, select it from a shadow popup button menu.

These menus are automatically populated with your Library shadows. Note that shadows for fill and stroke are set separately. Fill also supports inner shadows.

Adding a new shadow

There are 2 basic ways of adding a new shadow:

  • Click on the “+” button at the top of the shadow list in the Library
  • Click on the “Add new shadow...” menu item in a shadow popup button menu. This also sets the newly-created shadow in the popup button.

After adding a new shadow, a shadow editing popover appears. More about editing a shadow can be found in the following section.

(Note that you can also add shadows by copying and pasting shapes that use shadows from another document)

Editing a shadow

You can edit a shadow by double-clicking on it in the Library. Alternatively, you can reselect the same shadow in the Inspector popup button to show the edit color popover.

Editing a shadowEditing a shadow

The text field contains the name of the shadow. WebCode generates all names for you, but you can always change them to be more descriptive.

To change the color of the shadow, select a color from the popup button menu. A few tips:

  • bright outer shadows can be used to simulate glow:

Glow Shadow

  • bright outer shadows with low blur radius and negative offset are useful for simulating inset user interface elements:

Inset Shadow

  • bright inner shadows with low blur radius and positive offset are useful for simulating highlights of plastic user interface elements:

Plastic Shadow

  • dark inner shadows are great for cutouts:

Cutout Shadow