How to turn an image darker and blur using CSS?

Issue

I'm learning CSS but I don't know how to blur an image or background! Please help.

Solution

Use the CSS filter property:

<img class="darken blur" src="http://yourimageurl.com">

<style>
.darken {
    filter:brightness(50%);
}
.blur {
    filter: blur(8px); /* specify the amount of blur here */
}
</style>

Answered By - dave