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.