Home > Article > Web Front-end > How to set Gaussian blur effect in css
How to set Gaussian blur effect in css
- WBOYOriginal
- 2021-11-30 18:30:459136browse
In CSS, you can use the filter attribute and blur() function to achieve the Gaussian blur effect. The filter attribute is used to set the visual effect of image elements. Use it with the blur() function to add a Gaussian blur effect to image elements. , the syntax is "picture element {filter:blur(blur value);}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set Gaussian blur effect in css
We can set Gaussian blur to the image through the filter attribute. The filter attribute defines the element ( Typically visual effects (e.g. blur and saturation) of ).
When the attribute value is blur(px), set Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are blended together on the screen, so the larger the value, the blurr it is;
If no value is set, the default is 0; this parameter can Set css length value, but does not accept percentage value.
Let’s take a look at it through an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.img1 {
filter: blur(5px);
}
</style>
<img src="1118.02.png" class="img1" alt="How to set Gaussian blur effect in css" >
<img src="1118.02.png" class="img2" alt="How to set Gaussian blur effect in css" >
</body>
</html>Output result:
(Learning video sharing: css video tutorial )
The above is the detailed content of How to set Gaussian blur effect in css. For more information, please follow other related articles on the PHP Chinese website!