Shadow offset for rotating hands

I have not been 100% happy with the concept of adding a value, say 3, to the X and Y position for the shadow hand (a copy of the primary hand) as this also creates a shadow for the centre point of the hand as the hand rotates. (There are many posts giving examples of this)

In reality the centre point of the hand would be close to the watch face and not cast a shadow, whereas the tip of the hand would be raised and cast a shadow.

So how to create a shadow for the hand which is more realistic to having no shadow at the centre point and also deals with the need to change the lead/lag of the shadow as it rotates and also lengthens / shortens as it rotates?

For example if the imaginary light source was at the 10 o’clock position then the shadow hand would have max. advance at the 1 o’clock position and max. lag at the 7 o’clock position.

I have experimented and would appreciate comments feedback on my attempt using the following in the shadow hand ;
(#DWFSS#+((sin(rad(#DWFSS#+60))*1.5))) - for the rotation and
(320+((sin(rad(#DWFSS#-30))*10))) - for the Height

The value of ‘1.5’ in the rotation can be changed to increase/decrease the lead/lag offset of the shadow.

The value ‘10’ in the height can be changed to increase / decrease the shadow hand length (Max. at 4 o’clock)

Has anyone done something similar of have an easier way of achieving this?

My example uses a second hand with no tail so this does have limitations.

1 Like

The easiest way would be to make a set of custom hands that are wider at the end and very narrow at the the center point. That way you could still use the normal hand for the actually time and use the custom version as the shadow under the normal hand and offset.

Hi, the easiest way is simply to make your own shadow layers and make whatever adjustments you want at the graphics level. But … I think your premise may be flawed. From what I observe usually the shadow cast by the hands is fairly uniform, including the center post.
Here are just a couple of examples.

1 Like

I agree, setting the 3px offset is how it should be, now it looks like the light comes from the center.
What you may perceive as not realistic, is the shadow being at the same offset at any depth. Fixing that will be a lot harder though.

1 Like

That could be compensated for by doing a 2px offset for the hour hand. A 3px offset for the minute hand and a 4px offset for the seconds. That would imitate the height of each hand from the watch face.


Nah, I meant dept differences in the face for the same hand, like this:

The minute hand shadow has a smaller offset at the edge than in the middle part


I sometimes will go to the trouble of having 2 or even 3 shadow layers for a given hand to account for the different heights it may be off the dial elements. Like the subdial hands on this one. You can see a deep shadow in the center but a closer shadow over the raised part of the dial. It’s fun to get these details but the sad truth is it’s probably mostly lost on the small watch screen


This is not the case in properly made watch, where the dial is flat and watch hands are parallel to it, each in its own “layer”, otherwise they could work as scissor blades, or even scratch the dial or glass from inside.


Thanks for the information petruuccios, I will take this into account in my designs !


Thanks Guys - I like the idea of multiple layers, I think also I need to create a ‘shadow’ hand in designer sw to make it more realistic rather than copying the main hand and setting tint and opacity :slight_smile:


Ok, so still total rookie here, and maybe I’m missing the point. But I had to try out what the discussion was about to understand the good/bad. Personally, when I look at my watches, I do see the center point stacked, and each hand is on it’s own layer or level. I did a +2 offset on both the X & Y just to try, and did a 30% opacity on the shadow layers. I kept the offset the same across all three, because the hands all have different sized centers. Watching the different arms really closely, the shadow does seem to fall where a true shadow would fall. At first I was concerned it would appear to rotate in a weird way. Not the case.

Kvansant, that face is awesome.


Actually, what am I missing here. Now I’m seeing double shadow…? Great thread!

1 Like

Ah! I didn’t realize in the color picker window for each element, that there is already a drop shadow button. I like the visual of the secondary layer with the described offset and opacity vs the click button option drop shadow. It looks much more organic vs digital.


thanks Willy! You might try even more offset than you’ve described. My default starting point for central hands shadows is X/Y +1/+7 for the hour hand then +1/+1 more for the minute, and again for the seconds (if there is one). Depending on if there are already raised elements on the dial forcing the hands up even higher I might start the shadow offset higher. My default for sub dial hands is closer to the dial, +1/+4

1 Like