Question

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?

Answer 1

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.