How to create multiple box-shadows for an element with CSS

2020-03-26

The value of the box-shadow CSS property can have multiple shadow definitions, separated by a comma. Each of the values has is defined by inset (optional value to indicate the shadow should be inside the element) offset-x offset-y blur-radius spread-radius color. Here is an element with so many box shadows that one of them cannot even be seen:

	box-shadow:
		inset -1em -1em 0 0 aquamarine,
		inset -1em 1em 0 0 dodgerblue,
		inset 1em -1em 0 0 lightcoral,
		inset 1em 1em 0 0 teal,
		-1em -1em 0 0 aquamarine,
		-1em 1em 0 0 dodgerblue,
		1em -1em 0 0 lightcoral,
		1em 1em 0 0 teal;