CSS blur() Function
Example
Apply different blur effects to <h1> and <img> elements:
h1 {
filter: blur(2px);
}
#img1 {
filter:
blur(2px);
}
#img2 {
filter: blur(6px);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS blur() filter function applies a blur
effect to an element. A larger value will create more blur.
If no value is specified, 0 is used.
| Version: | CSS Filter Effects Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| blur() | 18 | 12 | 35 | 6 | 15 |
CSS Syntax
blur(radius)
| Value | Description |
|---|---|
| radius | Optional. Specifies the radius of the blur. A larger value will create more blur. If no value is specified, 0 is used (no effect). |
More Examples
Example
Create a blurred background:
img.background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
filter: blur(35px);
}
Try it Yourself »
Related Pages
CSS reference: CSS filter property.
CSS reference: CSS brightness() function.
CSS reference: CSS contrast() function.
CSS reference: CSS drop-shadow() function.
CSS reference: CSS grayscale() function.
CSS reference: CSS hue-rotate() function.
CSS reference: CSS invert() function.
CSS reference: CSS opacity() function.
CSS reference: CSS saturate() function.
CSS reference: CSS sepia() function.
