Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Using Negative Box-Shadow Spread To Communicate Depth In CSS

By Ben Nadel on
Tags: HTML / CSS

Earlier this week, in Episode 17 of the CSS Podcast: Shadows, Adam Argyle made the observation that in the "real world", when you pick an object up off a surface the shadow that forms beneath the object actually shrinks. He then noted that we can better emulate this behavior by using a negative spread within our box-shadow CSS properties. Frankly, I didn't even know that the spread option could be negative. As such, I thought this would be a fun effect to try out for myself in some vanilla CSS.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

To get a sense of whether or not a negative box-shadow spread communicates a more natural, organic sense of depth, I'm putting two boxes side-by-side. When you hover over each box, they "rise up" off the page: one with no box-shadow spread; and, one with a -5px box-shadow spread:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>
		Using Negative Box-Shadow Spread To Communicate Depth In CSS
	</title>
</head>
<body>

	<h1>
		Using Negative Box-Shadow Spread To Communicate Depth In CSS
	</h1>

	<div class="container">
		<div class="tile tile--a">
			No Spread
		</div>
		<div class="tile tile--b">
			-5px Spread
		</div>
	</div>

	<style type="text/css">

		.tile {
			box-shadow: 0px 1px 0px 0px rgba( 0, 0, 0, 0.3 ) ;
			transition-duration: 500ms ;
			transition-property: box-shadow, transform ;
			transition-timing-function: ease-in-out ;
		}

		.tile:hover {
			transform: translateY( -30px ) ;
		}

		.tile--a:hover {
			/* No spread. */
			box-shadow: 0px 40px 20px 0px rgba( 0, 0, 0, 0.15 ) ;
		}
		.tile--b:hover {
			/* -5px spread pulls edges of shadow in on all sides. */
			box-shadow: 0px 42px 20px -5px rgba( 0, 0, 0, 0.15 ) ;
		}

		/* -- Non-demo-related styles. -- */

		.container {
			display: flex ;
			justify-content: space-around ;
			margin-top: 100px ;
		}

		.tile {
			align-items: center ;
			background-color: #fafafa ;
			border: 1px solid #ccc ;
			border-radius: 8px 8px 8px 8px ;
			color: #777777 ;
			display: flex ;
			font-family: monospace ;
			font-size: 18px ;
			height: 150px ;
			justify-content: center ;
			width: 250px ;
		}

	</style>

</body>
</html>

In both cases, the :hover effect increases the blur and the offset of the shadow; but, only the latter pulls the edges of the box-shadow in by including a negative spread. And, when we run this code in the browser, we get the following output:

Two boxes rising up off the page using box-shadow in CSS.

The difference is really subtle. But, I think Adam is right: using a negative box-shadow spread does feel ever-so-slightly more natural, more organic. Of course, in most application, I rarely have objects pop out from the page quite this much, so it will be interesting to see how this feels on a smaller scale. But, definitely a cool little CSS technique to have squirreled away in my brain.



Reader Comments

Ben, interesting idea.

For this demo, you might want to exaggerate the effect a little by setting it to -10px to make it a little more obvious; I couldn't see the difference at first.

Ted

Reply to this Comment

@Ted,

Yeah, it's super subtle. I didn't want to make it too large or I thought it started to look a little odd (but would have been more obvious).

I think it's a cool thing; however, I am not sure how often I will have elements "come off the page" to the point where this will make a noticeable different. But, still, good food for thought.

Reply to this Comment

but i think i need negative shadow like
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
can you please tell me...

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Blog
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.