This is a demo of making a CSS box shadow "hat" over a container and making the shadow gradual by overlaying multiple shadows. The desired effect is that as the shadows on the sides of the container trail off, it's not just a rounded shadow point, but rather a gradual radient of opacity that leads to a complete transparency.

This technique uses stacked box shadows, because other techniques I tried, like using a mask for transparency, some SVG based techniques and other shenanigans didn't yield the desired result.

Hello, World!