Image filter

Transform Web Images

Blur

A lesser-known CSS trick is using the filter property to apply graphic effects like blurring or color shifting to an image. The filter property is very powerful and versatile, allowing for a wide range of effects to be applied directly within your CSS code, without any need for external graphic editors.

Here is an example of how you could use it to apply a grayscale effect:

img {
    filter: grayscale(100%);
}

In this case, the image will be completely converted to grayscale. You can adjust the percentage to control the intensity of the grayscale effect.

This property can also be combined with other CSS effects to create more complex visual modifications. For example, you could combine blur and brightness for a dreamy effect:

Example Code