How to achieve smooth box-shadow in CSS

In this post we are going to look at how we can achieve Smooth and Dreamy box-shadow.

box-shadow syntax (x-offset y-offset blur color)

By Layering multiple shadows, we can create Smooth box-shadow.

/* Default box-shadow */
  box-shadow:0px 6px 6px rgba(0, 0, 0, 0.11);

/* Multiple layering for smoother box-shadow */
  box-shadow:0px 2px 2px rgba(0, 0, 0, 0.15),
    0px 3px 3px rgba(0, 0, 0, 0.15),
    0px 6px 6px rgba(0, 0, 0, 0.15),
    0px 8px 8px rgba(0, 0, 0, 0.15);
}

In this example, We have used 4 shadows with 15% alpha.

Sharp Shadows with Decreasing alpha.
Diffuse Shadows with Increasing alpha.

The blur radius if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

Tool: https://brumm.af/shadows

Happy Coding!😀