Ridiculously Simple Power Apps Drop Shadow Technique

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/ridiculously-simple-power-apps-drop-shadow-technique/. Author: Matthew Devaney.

Ridiculously Simple Power Apps Drop Shadow Technique Posted by - Matthew Devaney on - May 8, 2023 18 Comments

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 containe r, 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 Code language: HTTP ( http )

And the Font and Size properties for the body of the card are: Font : Font.'Open Sans' Size : 16 Code language: HTTP ( http )

The emojis were created by inserting a label onto the screen and pressing the [Windows] + [Period] hotkey on a Windows computer. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps