Understanding the difference between 'shadow' and 'drop-shadow' in Tailwind

[Anindya088]

Question

Hi All,

I was trying to create some drop shadow using the Tailwind classes, but realized that the difference in the levels is not that significant when I change the 'sm' to 'lg' or 'xl' etc.

I compared it to normal 'shadow' where the difference is indeed very prominent. I am showing some screenshot below.
Is there any reason why the behavior is like this? Should I use custom values if I want stronger effect in drop-shadow?

Screenshot (first one is drop-shadow, 2nd one is normal shadow)

This is my sample code:

with ui.row():
    ui.icon('person').classes('text-[100px] drop-shadow-sm text-red')
    ui.icon('person').classes('text-[100px] drop-shadow text-red')
    ui.icon('person').classes('text-[100px] drop-shadow-md text-red')
    ui.icon('person').classes('text-[100px] drop-shadow-lg text-red')
    ui.icon('person').classes('text-[100px] drop-shadow-xl text-red')
    ui.icon('person').classes('text-[100px] drop-shadow-2xl text-red')
    
with ui.row():
    ui.icon('person').classes('text-[100px] shadow-sm text-red')
    ui.icon('person').classes('text-[100px] shadow text-red')
    ui.icon('person').classes('text-[100px] shadow-md text-red')
    ui.icon('person').classes('text-[100px] shadow-lg text-red')
    ui.icon('person').classes('text-[100px] shadow-xl text-red')
    ui.icon('person').classes('text-[100px] shadow-2xl text-red')

Please let me know if I am missing something here.

Thanks,
Anindya

[falkoschindler]

According to the Tailwind CSS documentation (https://tailwindcss.com/docs/box-shadow and https://tailwindcss.com/docs/drop-shadow), both sets of classes translate to different CSS properties, e.g.

shadow-md      --> box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
drop-shadow-md --> filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

So why should they look identical?

[Anindya088]

Hi @falkoschindler ,

Oh sorry for the confusion, I did not mean to say that I was expecting both to be same.

What I meant was that when I run the different gradations of the 'shadow' class, the difference is very prominent, like I clearly see the shadow getting bigger/darker.

But for the 'drop-shadow' the effect (at least to me) is not very visible. Like if you take the leftmost and the rightmost, the 'drop-shadow-sm' and 'drop-shadow-2xl' , I can't make a visible difference in them.

Thanks,
Anindya

[falkoschindler]

I think it's partly because drop-shadow uses lower alpha values. Here I removed them altogether and a large shadow becomes visible:

def icon() -> ui.icon:
    return ui.icon('person').classes('text-[100px] text-red')

with ui.row():
    icon().style('filter: drop-shadow(0 1px 1px rgb(0 0 0))')
    icon().style('filter: drop-shadow(0 1px 2px rgb(0 0 0)) drop-shadow(0 1px 1px rgb(0 0 0))')
    icon().style('filter: drop-shadow(0 4px 3px rgb(0 0 0)) drop-shadow(0 2px 2px rgb(0 0 0))')
    icon().style('filter: drop-shadow(0 10px 8px rgb(0 0 0)) drop-shadow(0 4px 3px rgb(0 0 0))')
    icon().style('filter: drop-shadow(0 20px 13px rgb(0 0 0)) drop-shadow(0 8px 5px rgb(0 0 0))')
    icon().style('filter: drop-shadow(0 25px 25px rgb(0 0 0))')

In the end, it's a design decision Tailwind did for us. They not only provide shortcuts for CSS, but also chose a reasonable selection of suitable values. Somehow they think that this is what "medium shadow" or "medium drop shadow" should look like.

[Anindya088]

Hi @falkoschindler ,

Thanks so much, very clear now :)
At least I know now how to make it larger if I need to 😄

Thanks,
Anindya