Search code examples
htmlcssshadowbox-shadow

Shadow on text and on box have not the same Y position

I'm using a function for generating a gradian shadow on text or html tag. And I don't understand why the angle of the shadow isn't the same.

To get the same result on HTML tag I have to divide by 2 the y position of shadow (you have to uncomment this 3 lines on SCSS (l.14-l.16) on the Codepen example to see the result)

   // @if($i) {
   //   $y: $i/2;
   // }

Look like

Line commented First

Line not commented enter image description here

Solution

  • I made a answer to close this question with @Vinc199789 comment:

    "I think that is because you rotated you right div and that he is calculating from your rotated position."