CSS solid box-shadows one edge only
box-shadow: h-axis / v-axis / blur / spread / color;
Solid box-shadows can be very useful in web design to create infilled rectangles of any colour that have no effect on page layout. The one below is slightly transparent for illustrative purposes. The box is shown pink, the box-shadow is shown yellow.
If you want a solid box-shadow only on the bottom
The specified height of the box must be at least as high as the height of the box-shadow. If the (pink) box is only 200px high and the (yellow) box-shadow is 250px high, the top of the box-shadow will be 50px below the box, as below: box-shadow: 0 250px 0 0 yellow;, and the box-shadow will be 50px less: 200px.
(1) The height of the box-shadow will never be more than that of the box, (2) the gap will be box-shadow height minus box height, and (3) the distance between the box and the limit of the box-shadow will be the specified height of the box-shadow, so just make sure the box-shadow dimension is no more than than the box height.
250px down, 0 spread. The solid yellow shadow only goes downwards. Its starting point depends on the height of the box being at least as much as the height of the shadow or there will be a gap (below).
There can be two solid box-shadows off different edges of the box, each a different color – shown below the yellow box-shadow.
Box with solid box-shadows on each side – box-shadow: -300px 0 0 0 #9cc, 300px 0 0 0 #88a2b5;
On mobile phones the two box-shadows extend off-screen with no effect on page layout.
Category: Technical Category
