PowerApps Modern & Minimalistic Design Tip #1 – Box Shadows

Do you want to add drop shadows to elements in your PowerApps without using images?

PowerApps does not provide an OOB property to set shadows for elements or controls but you can use the HTML text control to add html with custom styles to implement the desired shadow effect.

SVGs are another great way to generate custom icons, images, shadow effects, animations and much more. I love going the SVG route for animation effects and complex visuals as such. In this post we will walk through a simple html-css trick for adding effects to your app elements without the need for images.

CSS3 ‘box-shadow’ property allows designers to easily implement drop shadows on elements by specifying values for color, size, blur, spread and offset. The basic syntax for creating a box shadow is:

box-shadow: x-offset y-offset blur spread color;

The offset and radius values can have positive or negative values

  • x-offset: Positive value for shadow on the right and negative value for shadow on the left
  • y-offset: Positive value for shadow below the element and negative value for shadow above the element
  • blur (optional): Larger the value bigger the blur radius.Zero (0) creates a sharp shadow. The color will diffuse from opaque to transparent
  • spread (optional): Defines how much the shadow should grow
  • color: Sets the color of the shadow

To create a box with drop shadow, insert a HTML text control on the screen and set the HtmlText property of the control with the following div content.

Note: The ‘border-radius’ property sets the rounded edges for the div box. And the ‘margin’, ‘width’ and ‘height’ properties can be set to values as desired.

"<div style='margin:10px;width:190px;height:150px;background-color:#;box-shadow:0 3px 6px 1px  #ccc; border-radius:15px'></div>"

Below are a few variations of box shadows you can achieve by playing around with the values that go into that property:

Also, here’s a free box shadow css generator where you can quickly try plugging in different values/variations and generate css declarations.

Hope this was useful and I can’t wait to see how you amplify your apps with this simple design tip. Happy PowerApp-ing!

Follow me on twitter and the blog for more tips & tricks.

19 thoughts on “PowerApps Modern & Minimalistic Design Tip #1 – Box Shadows

  1. Hello Geetha,
    thank you for this great article, I just watched a video of April Dunnam at the Ignite and came along your App which looks amazing, and opens a whole new world for me 🙂
    I wondered if theres some step-by-step tutorial on how to build the screen thats displayes here?
    That would be awesome.

    Liked by 1 person

  2. Howdy just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Firefox. I’m not sure if this is a format issue or something to do with browser compatibility but I thought I’d post to let you know. The design look great though! Hope you get the issue fixed soon. Many thanks

    Liked by 1 person

  3. This Drop Shadow trick is supreme – makes everything look good with light weight. Thank you! By the way, do you have or know of a Leave Application Power App that you are showing in the screenshots above? (or similar)

    Liked by 1 person

  4. Hi Geetha,
    Many thanks for sharing this great tip, I found your site after wathcing your Power Platform Community presentation yesterday.

    How did you get the “Text” or numbers in your case aligned vertically inside the Shadow box? If you could kindly share the code that would be most appreciated. I look forward to more posts and presentations from you. I’ve been well impressed with what I have seen so far.

    Liked by 1 person

  5. html base component
    1. Shadow box
    2. Background Color Change
    3.Graident Color, Gradient Direction, Gradient Color Input
    4.Border , Border Type, Border Color, Border Width
    5.Border Radius with all Separate Corner Value
    6.Margin property with all 4 separate view
    7.Shadow property with Shadow color , X and Y Value, blur & spread
    8.Button – Shadow Box Turn to html Base Button with all Shadow Box Properties
    github – https://github.com/kumaraman0031/Powerapps-ShadowBox


  6. Pingback: 5 Power Apps Gallery Design UX Tips

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s