I just (re)discovered all the amazing effects you can apply to images purely in CSS. We rarely use them in our designs and code, while they are now quite strongly supported by major browsers (only IE doesn’t, but Edge does).

Here’s a list of each effect. And they can be combined too!

Original Photo

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Grayscale filter

.filter-grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Sepia filter

.filter-sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Saturate filter

.filter-saturate {
    -webkit-filter: saturate(4);
    filter: saturate(4);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Hue-rotate filter

.filter-hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Invert filter

.filter-invert {
    -webkit-filter: invert(.8);
    filter: invert(.8);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Opacity filter

.filter-opacity {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Brightness filter

.filter-brightness {
    -webkit-filter: brightness(.5);
    filter: brightness(.5);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Contrast filter

.filter-contrast {
    -webkit-filter: contrast(3);
    filter: contrast(3);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505

Blur filter

.filter-blur {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

salad-lamb-s-lettuce-lettuce-leaves-green-60505