How To Create Image Effect Using Html And Css

Step1  Add Html

<img src=” specify your directory”/>


Step2  Add CSS

Graysclae example

img {

-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */

filter: grayscale(100%);



Blur Example

Apply a blur effect to all images:

img {

-webkit-filter: blur(5px); /* Safari 6.0 – 9.0 */

filter: blur(5px);













P.S. Thanks for reading to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!


We're always here. You can send us an email and we'll get back to you, asap.


© 2015 - 2018


Log in with your credentials

Forgot your details?