Can I use a gradient as the selected color in a box-shadow

I would like to make a box-shadow appear 开发者_运维知识库darker on one side than another.

I would like to do something like the following:

box-shadow: 2px 3px 6px linear-gradient(90deg, #ccc, #fff);

Is this possible?

Firefox, at least, won't let you do this. Firefox only supports linear-gradient in a background-image style.

Even for browsers that may allow gradients in more places than Firefox does, they probably wouldn't allow this particular usage. In general, the gradient properties are only meant to work in places in CSS where images are allowed, not to replace "normal" colors.

You could do something sneaky like making a gradient the background-image of an element that's behind the one you're setting this box-shadow on, which you could use make it appear like the shadow is darker on one side. That's going to be quite a bit more complicated in terms of markup and styling, though.