Variables in Effects: shadows, blurs

Variables are missing for Effects like drop shadow, inner shadow, blur, and background blur.

They should be used for the number fields and colors, so we can have dynamically applying themes and sizes for these effects.


I’m hoping this is part of the “and more” mentioned on this page.

It would be nice to be able to use variables in the shadow color effect. Right now I can only pick a color from a variable and then the value is copied but this doesn’t work when I have modes selected.


This feels like a bug. I’m using color variables for theming for multiple customers (e.g. light and dark mode base primitives with subset/brand; subset/brand varied per customer, with functional names cued across modes to primitives). I had to ditch drop shadows on some component states because the tool can’t include its color value for different modes. I think this needs to be there for theming to feel fully usable.

1 Like

Thanks for the feedback!

We’l pass this onto our Variables team for future consideration.

I have seen workarounds where you would make an object behind your surface with a blur effect. This method allows you to use a semantic color for the shadow. However, I personally would wait until an update comes out. They are coming out with ANOTHER 21+ “little updates” that I hope tackle things like this.

1 Like

How frustrating! :man_facepalming:t3:

Now I have to create duplicate variants for my component showing a light gradient, and another dark for dark mode support.

We are unable to refactor our design system to use variables instead of multiple style libraries because variables are missing in Effects.

Until then it makes no sense to migrate colors to variables, but keep effects as styles, because those effects force us to still hang on to multiple style library landscape.


This has been fixed!

I’m able to use Number and Color variables in Effects.