⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Floating Content Shadow Effect Border Radius Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
In this very quick design tip I am sharing a pure CSS trick to get a Floating Content Shadow effect, an effect that we had to use images for in the past. Adding the effect will make your content appear to be floating in mid-air on the page. Especially cool placed under images, icons, graphics and videos. 
<!DOCTYPE html>
<html>
<head>
<style>
div.bot_container{
	width:285px;
	height:420px;
	margin:0px auto;
}
div.bot{
	background: url(adam.png);
	width: 285px;
	height: 302px;
}
div.bot_shadow{
	height:16px;
	background: #999;
	opacity:0.1;
	border-radius:100%;
	margin:32px 0px 0px 0px;
	top:100px;
}
</style>
</head>
<body>
<div class="bot_container">
  <div class="bot"></div>
  <div class="bot_shadow"></div>
</div>
</body>
</html>
▲