filter: blur(***);

Browser
  • IE
Type
  • Extension

The blur filter add the blur effect to the element.


#example {
filter: blur(add=true, direction=90, strength=10);
}
Attribute Value Explanation
add 0 (false) or 1 (true) 0 (false) = not add the original content to the blurred content
1 (true) = adds the original content to the blurred content
direction 0 - 315 (45 degree increments) the direction of the blur
0 = top
45 = right top
90 = right
135 = right bottom
180 = bottom
225 = left bottom
270 = left
315 = left top
strength number of pixels the distance of the blur

Example

The original

<img src="image/friend.gif" alt="IMG" width="170" height="140">
Output
IMG 

<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Output
Example text
Only the strength of the blur

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(strength=30);">
Output
IMG 

<div style="width: 90%; padding-left: 30px; filter: blur(strength=30);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 

<div style="font: bold 170% sans-serif; width: 90%; padding-left: 10px; filter: blur(strength=10);">
Example text
</div>
Output
Example text
The direction and strength of the blur

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(direction=0, strength=30);">
Output
IMG 

<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: blur(direction=180, strength=10);">
Example text
</div>
Output
Example text
Not add the original content to the blurred content

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(add=false, direction=315, strength=20);">
Output
IMG 

<div style="font: bold 170% sans-serif; width: 100%; filter: blur(add=0, direction=90, strength=15);">
Example text
</div>
Output
Example text