The Structure of a CSS box-shadow

As you can see with the first shadow, we’re setting it to inset so the shadow appears inside our element. To create the shadow outside our element, you need to omit inset all together. Nothing needs to take it’s place as an outside shadow is the default.

The x-offset tells the browser how far to move the shadow horizontally and the y-offset vertically just as you’re used to doing with background image positioning. The value which follows that however, gives you control over the blur of the shadow. For our button we’re creating a fake 3D effect with the first shadow set to black in rgba with an alpha value of 0.45 giving the impression that it is coming off the page. The alpha value is just right to let some of the color of the button to come through as though less light is bouncing off it.

The second shadow completes the 3D effect by creating a shadow where the light is being blocked by the button itself. It’s very simple but works really well. Both shadows are declared in the single box-shadow property separated by a comma.

Leave a Reply

Your email address will not be published. Required fields are marked *