A Shadow component lets you apply shadow around any components. It is very customizable and compatible with Android, iOS and Web. It's not required to define its size: the shadow is smartly applied on the first render and then precisely reapplied on the following ones.

Adding a Shadow Component

  • Select the Shadow component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Select the added component in the Components tree.
  • Select an Image, Image Background or any other component you want to display as children of the Shadow component to have a shadow around it.
    Go to the Config tab (second tab) in the Properties panel and update the prop per your requirements of shadowing around the child component.

Configuration Properties

PropertyDescription
Component Name An optional descriptive name for the component. If the name is not "Shadow", it will appear as a comment above this component in the generated code.
DistanceThe distance of the shadow.
Start Color The initial gradient color of the shadow.
End Color The final gradient color of the shadow.
Paint Inside Apply the shadow below/inside the content.
Stretch Force children to occupy all available horizontal space.
Offset X Moves the shadow in the X direction
Offset Y Moves the shadow in the Y direction