How To Create A Shadow Effect In Power Apps

In this blog, we will discuss about the methods to create shadow effects in PowerApps. There is no direct approach in PowerApps to create a shadow effect on the controls and we must use multiple approaches to achieve it.

There is no direct approach in PowerApps to create a shadow effect on the controls, and we must use multiple approaches to achieve it. So, In this blog, we will discuss the methods to create shadow effects in PowerApps.

So, there are basically two ways to achieve a shadow effect.

• Using HTML text control
• Using OOTB Control

Using HTML Text Control

1. First, we will add an HTML text control to the canvas screen and apply the HTML code to that control to achieve the shadow effect.
   
   e.g.

   “ <div style='margin:10px;width:270px;height:240px;background-color:White;box-shadow:0 0px 14px 0px #ccc; border-radius:50px'></div>”

Using OOTB Controls

Using OOTB will not give you the full shadow, but it can enhance the look of the controls; this method does not require any coding.

1. We will add a button control (Button 1) to the app and make its display mode as View mode.
2. We will add another button control (Button 2) with display mode as edit mode.
3. Now place both the buttons in the same X & Y Position and select Button1 and change its fill color property to Light Gray() and increase its height and width by 4px.
4. Now Select Button1, change its fill property according to your need, and reorder the position of Button2 to front.
5. Below are the properties of the button used and the output.

Output

Conclusion

This is how we can create the shadow effects on button control or by using button control in powerapps.