Check out our latest news and articles.

Visit our Blog

Add depth and elevation with shadows

The addition of shadows to Basic Boxes opens up new visual possibilities for your BaseCase apps. Shadows are a highly customizable and versatile effect and can be used in a variety of practical and creative ways, potentially adding a unique look and feel to your apps.

Simple shadows can help to subtly enhance your UI designs, by adding depth and elevation to establish hierarchy and contrast. Even controls that don’t directly support shadows can do so by being placed within a basic box, acting as a ‘container’ to which shadows can then be applied. Applying shadows in such a way can make your apps more intuitive and easy to use.

After dragging a basic box onto the Canvas, within that box’s properties, click the + icon beside Drop or Inner Shadow to add a new shadow. A numerical overview of the shadow’s settings will appear; click to edit them.

Adding shadows to a basic box
  • Drop Shadow applies a customizable shadow behind the basic box, giving the impression that it is raised above the surface behind it.
  • Inner Shadow applies a customizable shadow within the border of the basic box, creating an embossed effect.
Examples of drop shadow and inner shadow effects

The shadow settings popover contains a number of parameters relating to its properties:

Shadow settings popover
  • X-offset and Y-offset: Negative values move the shadow left and upward, whereas positive values move the shadow right and downward.
  • Blur Radius: Increasing the blur radius makes the shadow bigger and lighter.
  • Spread: For drop shadows, positive values will cause the shadow to spread outward whereas, for inner shadows positive values will cause the shadow to spread inward.
  • Color defines the color of the shadow, which can be chosen from a palette of swatches, or specifically by using the Color Selector.

Tip: Adjust the Alpha (A) value within the Color Selector to control the shadow’s opacity.