Can anyone make box-shadow like this image?

Can anyone make box-shadow like this image?

Hi dileepma. Welcome to the forums. :slight_smile:

Here’s a rough attempt:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Box Shadder</title>
	
<style media="all">
div {
  width: 215px; 
  height: 80px; 
  border: 1px solid #ccc; 
  position: relative; 
  border-radius: 15px; 
  background: white;
}

div::before, div::after {
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: -1;
  width: 50%;
  max-width: 100px;
  height: 20px;
  content: "";
}

div::after {
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
</style>
</head>

<body>
	<div>
	</div>
</body>
</html>

It’s only tested on webkit browsers (Chrome/Safari) so you’d need to add in other vendor prefixes etc for other browsers.

Thanks Thanks Thanks !!! No words to say say !!! Thank you again!!!

You’re welcome. :slight_smile:

Remember that it won’t work in all browsers, though—even with vendor prefixes for Firefox etc. (CSS3 is still experimental, and some old browsers like IE8 and under hang around like a bad smell.) You could use an image instead to create that effect if you need it to work in all browsers.

I used browser vendors hacks for work it on all browsers…I just need to display it on IE9 , Chrome/Safari latest version, Firefox latest version & Opera latest version.All the hacks works for me.

Great, glad to hear it. :slight_smile: