Real cross browser box-shadow

If you want more css functionality, ccs3Pie gives you all the functionality you need. If you only need box-shadows – read on. This method is easier than css3Pie, since it doesn’t use VML.

Internet Explorer versions below version 9 doesn’t have the css3 box-shadow property. You can use the dropshadow filter, but this filter creates a solid dropshadow. It is not really what we want. To create real drop shadow for ie8, ie7 and ie6 we apply the Blur filter.

I have used this technique to create box-shadows on Aftenposten for over a year, but only as markup hidden in conditional comments. With this html-component the box-shadow just works.

Just add the file using IE behaviours and Internet Explorer will display propert dropshadows.


<!--[if lt IE 9]>
<style type= "text/css">
	#dropshadow {
<style = "text/css">
	#dropshadow {
		box-shadow:5px 5px 10px #ccc;

Here is the code for

<public:attach event="oncontentready" onevent="oncontentready()" />

<script type="text/javascript">
	function oncontentready() {
		var dropShadow=window.document.createElement('div');
		var innerWrapper = window.document.createElement('div'); = (element.currentStyle['position'] == 'static') ? 'relative' : element.currentStyle['position']; = "relative"; = "2"; = "#ffffff";

		var html = element.innerHTML;
		element.innerHTML = '';
		innerWrapper.innerHTML = html;

		var style = this.currentStyle['box-shadow'].split(' ');
		var shadowX = style[0].replace('px','');
		var shadowY = style[1].replace('px','');
		var shadowWidth = style[2].replace('px','');
		var shadowColor = style[3];'absolute';'px';'px';;'100%';'100%';;

		var sProperties = "pixelradius="+shadowWidth+", makeShadow=true, ShadowOpacity=0.5"; = "progid:DXImageTransform.Microsoft.Blur("+sProperties+")";


About Tor Brekke Skjøtskift

Senior Webdesigner Media Norge Digital
This entry was posted in CSS, IE Behaviours, Javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>