Box shadow with only vertical spillover?

HTML & CSS
1

I’m using this box shadow to achieve a gradient fade at the top of the box. However, the feather spills over the left and right sides. I only want the feather in vertical (top) direction.

background:#ccc;
box-shadow:0 0 150px -3px #ccc;
2

Hi,

I don’t think you can do exactly what you want but this seems close.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test {
	background:#ccc;
	box-shadow: 0px -150px 150px -120px red;
	width:300px;
	height:300px;
	margin:200px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

If you want a linear gradient then just add some pseudo content before the element and apply a gradient to that and position it as required.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test {
	background:#ccc;
	width:300px;
	height:300px;
	margin:200px;
	position:relative;
}
.test:before {
	content:" ";
	display:block;
	position:absolute;
	top:-150px;
	left:0;
	right:0;
	height:150px;
background: #ffffff; /* Old browsers */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.07, rgb(204,204,204)),
    color-stop(0.54, rgb(247,247,247)),
    color-stop(0.77, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(204,204,204) 7%,
    rgb(247,247,247) 54%,
    rgb(255,255,255) 77%
);
background-image:linear-gradient(
    center bottom,
    rgb(204,204,204) 7%,
    rgb(247,247,247) 54%,
    rgb(255,255,255) 77%
);




}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
3

Alas , I hate this solution but it does work.

wrap the element in a container (DO NOT GIVE THIS ELEMENT ANY EXPLICIT DIMENSIONS). Add padding on the sides where you do want the shadow to be visible, and overflow:hidden.