JavaScript Kit
Complete JavaScript Reference

Reference List

MotionBlur Filter

Last updated: May 23rd, 2007

The MotionBlur filter causes the content of an object to appear to be in motion.. Defined via IE's CSS filter property, here is its basic syntax:


filter :progid:DXImageTransform.Microsoft.MotionBlur(attribute1=value1, attribute2=value2, etc);

Example using inline CSS:

<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30);">Some DIV</div>

Syntax via scripting:

//To define a new MotionBlur filter on an element ="progid:DXImageTransform.Microsoft.MotionBlur(attribute=value1, attribute2=value2)"

To access an existing property within the MotionBlur filter:

//To access an existing property within the MotionBlur filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element

When getting or setting a specific filter's attribute via scripting, you capitalize the attribute to turn it into a property.

Below lists the attributes/properties of the MotionBlur filter:

MotionBlur Filter attributes (properties)

Attributes/ Properties Description
add Boolean value that specifies whether the filter image overlays the original image. Default is false.

Valid values: true/ false

enabled Sets/ returns whether the filter is enabled or not. Default is true.

Valid values: true/ false

direction Sets the angle (direction) of the blur effect. Default is 270

Valid values: 0 - 360, in increments of 45 (degree implied). For example, 0, 45, 90, 135, etc...


<style type="text/css">

<img id="mycart" src="cart.gif" />

<script type="text/javascript">

function leftrightmove(){
var currentcartpos=parseInt(
if (direction=="right"){
if (currentcartpos<300)"px"
direction="left" //go left instead
mycart.filters[0].direction=90 //change filter direction
else if (direction=="left"){
if (currentcartpos>0)"px"

var direction="right" //Set cart to go right first
var mycart=document.getElementById("mycart")
var filterscheck=mycart.filters && mycart.filters.length>0 //check if element supports filter/ has at least 1 filter defined

if (filterscheck){ //if filters supported


strength Sets the strength, or distance (in pixels) in which the blur spreads. Default is 5.

Valid values: Integer greater than 0.


<div style="width:150px; height:120px; filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=50, Direction=270)">
<img src="cart.gif" /><br />
Lets go shopping!


Lets go shopping!