# Create a box with shadows in Power Apps easily

* Add an HTML Text object to the Power Apps Canvas Application
    
* And change the HtmlText property of the object for this one:
    

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685487629093/0c24fdb1-c63e-405b-a179-7b654f4d22a3.png align="center")

And it will look like this one:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685487577531/e560201f-fc41-4b08-b6e2-a6a9713c4f59.png align="center")

Neat!, so we can use the power of HTML inside PowerApps.

## But there is more!

What if we want to create objects of different sizes? Simple, Change the HTMLText for this one:

```javascript
 "<div style='margin:10px;width:" & Self.Width &" px;height:" & (Self.Height-35) &"px;background-color:#;box-shadow:0 3px 6px 1px  #ccc; border-radius:15px'></div>"
```

So we can use any size and we could copy the HTML objects.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685487879464/43753251-9678-47b0-baf0-b304f5fda637.png align="center")

Why "Self.Height-35"? For some reason, if we set the height the same as the container, then this adds a scroll. So we reduce the size of the HTML so we could avoid the scroll

* Self.Height:
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685488151369/7be5fbdd-7f75-462b-a36a-54ce21a2ff6c.png align="center")

* Self.Height-35:
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685488199307/63245ab7-4035-4d87-8451-816095250ebb.png align="center")