CSS Image Blur Effect: How to Blur Images with -webkit-filter and filter

CSS Code for Image Blur Effect

To add a blur effect to an image using CSS, you can use the following code:

-webkit-filter: blur(10px); filter: blur(10px);

In the code above, the 'blur()' function is used to specify the amount of blur to apply to the image. You can adjust the value inside the parenthesis to increase or decrease the blur effect.

Note that the 'webkit-filter' property is used to apply the blur effect in webkit-based browsers (such as Safari and Chrome), while the 'filter' property is used to apply the effect in other modern browsers.

That's it! By adding this code to your image element, you can easily add a stylish blur effect to your images using just CSS.