Shadow color and multiple shadows

[pierreburel]

What version of Tailwind CSS are you using?

v4.0.6

What build tool (or framework if it abstracts the build tool) are you using?

v7.3.1

What version of Node.js are you using?

v22.21.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/nUZbAL0dnw

Describe your issue

Opacity steps are lost when working with multiple shadows, like smooth shadows

For exemple, this smooth shadow

rgba(0 0 0 / 0.12) 0px -1px 3px 0px, rgba(0 0 0 / 0.12) 0px 1px 2px -5px, rgba(0 0 0 / 0.14) 0px 2px 5px -5px, rgba(0 0 0 / 0.15) 0px 4px 12px -5px, rgba(0 0 0 / 0.17) 0px 12px 15px -5px

is converted to

var(--tw-shadow-color, rgba(0 0 0 / 0.12)) 0px -1px 3px 0px, var(--tw-shadow-color, rgba(0 0 0 / 0.12)) 0px 1px 2px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.14)) 0px 2px 5px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.15)) 0px 4px 12px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.17)) 0px 12px 15px -5px;

where --tw-shadow-color (set by shadow-<color>) replaces the percentage.

Idealy it should be

color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 12%) 0px -1px 3px 0px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 12%) 0px 1px 2px -5px, color-mix(in srgb, transparent, var(--shadow-fix, #000000) 14%) 0px 2px 5px -5px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 15%) 0px 4px 12px -5px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 17%) 0px 12px 15px -5px;

Or am i not understanding the documentation well?

[sydneyvaughn75-ops]

Thanks for the details report I will look into this

…

On Tue, Mar 17, 2026, 1:24 PM Pierre Burel ***@***.***> wrote: *pierreburel* created an issue (tailwindlabs/tailwindcss#19817) <#19817> *What version of Tailwind CSS are you using?* v4.0.6 *What build tool (or framework if it abstracts the build tool) are you using?* v7.3.1 *What version of Node.js are you using?* v22.21.1 *What browser are you using?* Chrome *What operating system are you using?* macOS *Reproduction URL* https://play.tailwindcss.com/nUZbAL0dnw *Describe your issue* Opacity steps are lost when working with multiple shadows, like smooth shadows <https://www.joshwcomeau.com/css/designing-shadows/> For exemple, this smooth shadow rgba(0 0 0 / 0.12) 0px -1px 3px 0px, rgba(0 0 0 / 0.12) 0px 1px 2px -5px, rgba(0 0 0 / 0.14) 0px 2px 5px -5px, rgba(0 0 0 / 0.15) 0px 4px 12px -5px, rgba(0 0 0 / 0.17) 0px 12px 15px -5px is converted to var(--tw-shadow-color, rgba(0 0 0 / 0.12)) 0px -1px 3px 0px, var(--tw-shadow-color, rgba(0 0 0 / 0.12)) 0px 1px 2px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.14)) 0px 2px 5px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.15)) 0px 4px 12px -5px, var(--tw-shadow-color, rgba(0 0 0 / 0.17)) 0px 12px 15px -5px; where --tw-shadow-color (set by shadow-<color>) replaces the percentage. Idealy it should be color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 12%) 0px -1px 3px 0px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 12%) 0px 1px 2px -5px, color-mix(in srgb, transparent, var(--shadow-fix, #000000) 14%) 0px 2px 5px -5px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 15%) 0px 4px 12px -5px, color-mix(in srgb, transparent, var(--tw-shadow-color, #000000) 17%) 0px 12px 15px -5px; Or am i not understanding the documentation well? — Reply to this email directly, view it on GitHub <#19817>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNK24ZVBIOCSOXYYKZS34RGJ6ZAVCNFSM6AAAAACWVBLV4SVHI2DSMVQWIX3LMV43ASLTON2WKOZUGA4TAMZWGAYDCNQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>