Shadow

Shadow

In a nutshell

The Shadow property applies a box shadow to an element to create a sense of depth and elevation. You can choose from five elevation presets, each progressively larger and more diffuse, or remove the shadow if not required.

1. Description

Shadow adds a drop shadow behind an element's*link to elements page* boundary, making it appear raised above the page surface. The higher the elevation preset, the larger and softer the shadow, creating the visual impression of greater physical distance from the surface beneath. This enabled establishing visual hierarchy where elements with higher elevation draw more attention and appear more prominent on a screen.

  

2. Possible values

Shadow is selected from a dropdown with the preset options ranging from None to Elevation 5. While the initial values are ideal for slight separation in inline cards or icons that need minimal depth, higher values cater to prominent call-to-action containers and hero sections.

3. Visual reference

    
                                    

4. How to set shadow?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Shadow accordion within the pane.
  3. Click the dropdown and select a value from None, Elevation 1, Elevation 2, Elevation 3, Elevation 4, or Elevation 5.
  4. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Shadow is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Button
  9. Portal Forms
  10. Embed

6. Points to note

  1. Shadow and Corner Radius relationship - When Corner Radius*link to Corner Radius doc* is applied, the shadow follows the rounded outline of the element rather than a rectangular boundary. A fully rounded element produces a circular shadow.
  2. Shadow and Opacity relationship - Shadow is part of the element's full visual rendering. Therefore, when Opacity*link to Opacity doc* is reduced, the shadow fades along with the rest of the element's appearance.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Corner Radius
  8. Border
  9. Opacity
  10. Icon styling
  11. Stack styling