Ridiculously Simple Power Apps Drop Shadow Technique

The new Power Apps drop shadow property for containers makes it easy to your apps look modern and stylish. We don’t need to write complex CSS anymore to achieve shadows in Power Apps. Now we only have to choose a drop shadow weight from the properties menu. In this article I will show you how to create a drop shadow in Power Apps.

Table of Contents
• Create A Container With A Drop Shadow
• Round Container Drop Shadow Corners Using Border Radius
• Add Controls To The Drop Shadow Container

Create A Container With A Drop Shadow

Add a new container to a Power Apps canvas app. The container type can be a vertical container, a horizontal container or a float container.

Select a drop shadow weight from the right-side menu. In this example we will choose a semi-bold drop shadow.

The container control now has a shadow around its border.

Round Container Drop Shadow Corners Using Border Radius

A drop shadow can be rounded by changing the border radius property of the container.

While selected on the container change its Border Radius property to 10 pixels.

Add Controls To The Drop Shadow Container

Once the container with a drop shadow is setup we can place some more controls inside of it to make a card.

The Font and Size properties for the title of the card above are:

Font: Font.'Lato Black'
Size: 20

And the Font and Size properties for the body of the card are:

Font: Font.'Open Sans'
Size: 16

The emojis were created by inserting a label onto the screen and pressing the [Windows] + [Period] hotkey on a Windows computer.

Questions?

If you have any questions or feedback about Ridiculously Simple Power Apps Drop Shadow Technique please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.