# Box shadow ui problem

**URL:** <https://forum.pinegrow.com/t/box-shadow-ui-problem/4791>\
**Category:** Bug Reports\
**Tags:** bug\
**Created:** [December 29, 2020, 2:27pm UTC](https://forum.pinegrow.com/t/box-shadow-ui-problem/4791 "2020-12-29T14:27:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![beno](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/beno/32/2929_2.png) [@beno](https://forum.pinegrow.com/u/beno)\
**Post date:** [December 29, 2020, 2:27pm UTC](https://forum.pinegrow.com/t/box-shadow-ui-problem/4791/1 "2020-12-29T14:27:18Z")

</div>

In the box-shadow ui when dragging x or y Distance is effected.

![CleanShot 2020-12-29 at 16.24.05](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/31443088510934a394fc4b52e42a3299a22645ab.gif)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [December 29, 2020, 3:42pm UTC](https://forum.pinegrow.com/t/box-shadow-ui-problem/4791/2 "2020-12-29T15:42:04Z")

</div>

Hey @beno,  
It isn’t really a bug, it is just a shorthand that pinegrow uses. Basically, distance is a vector between the x-offset length, the y-offset length, and the direction. The `box-shadow` property can take up to 4 properties, including x-offset length and y-offset length.

The distance and angle automatically set the offset-x and offset-y lengths.

So, if the angle is 0 deg - that is straight to the right, all of the distance will go into the x length.

If the angle is 270 deg - straight down, all of the distance would go to the y length.

If you split the difference and set the angle to 315 deg - which is a 90 degree angle from the origin, down and to the right, the distance, x, and y don’t seem to match up at first.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/18c99bc3840b0d795d321972e6a23c4a00b281cd.png)  
However, we can make sense of this if you make your item getting a box-shadow an easy size, like 100px by 100px. Next, visualize a triangle with one corner at the upper-right. The first leg goes down (blue) and is the y-offset in length, the second leg goes right from the first leg (red) and is the y-offset in length, and the final leg of the triangle connects the two (yellow). Sorry for the crappy drawing.  
If you look at my box-shadow I have a distance of 42px.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b0ad5d1cd9c5e053bf2a6165d1e51eb99c93c93a.png)  
If you remember your trigonometry - a2 + b2 = c2. Solve for c2 = 42 and it equals 30 (when you round), the same value the X and Y display.

Anyway, this took longer to type out than I planned, but I hope it helps!  
Bob