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!😀
Top comments (0)