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.
Did You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
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.
hoowwwww. Finaly! Goodbye HTML + CCS style.
Hahaha. Yes, goodbye to CSS.
Remember to add what version of PowerApps you need to be running. I think it’s not the current one. Maybe I missed that part when browsing through the article.
Thank You Matthew 😊
You’re welcome 🙂
FINALLY!!! I have a great shadow box component that I’ve been using, but this is SO much easier and cleaner.
I know, right? So much easier!!!
This is awesome. I can’t believe I missed this when I looked at containers. Thanks MD
It’s awesome. Drop it inside a gallery and your gallery cards are done! Thanks Matthew.
I love that Microsoft dropped this right under our noses! Love this feature!
Going to make galleries and displays way easier than using a Button, and a container and building on that!
Thanks for showing it off Matthew
I would welcome this feature directly on Forms & Galleries as well!