How to get CSS linear-gradient identical to CSS box-shadow (example in explanation)?

Question

css

We have 2 squares (this is an example for clarity, not the final solution).
jsfiddle.net/zbj6D/
The left box uses the CSS box-shadow property and the right box uses the CSS linear-gradient property. At the same time, the shadow looks smoother than the gradient, even though the gradient seems to use a linear fill. How to achieve identical results?

Answer 1

First, the gradient doesn't have an identical look due to the settings.
Secondly, box-shadow has an inset property so that the shadow is inside the box, not outside. And then your crutch with the clip puzzled for a few seconds.

Answer 2

No way. Shadow and gradient are different things, and browsers implement them differently.
For example:
-moz-linear-gradient(top,white 0,black 200px);
gives a result close to the shadow in Firefox (but not the same, apparently because the shadow is not a linear gradient), but in Chrome the result is far from the shadow.

Answer 3

I apologize in advance for the necroposting.
Something remotely similar. jsfiddle.net/jane19n/93t4A