CSS Colors

Another question that pops up a lot is how to change the colors of the flags. At another tutorial (SVG/CSS Embed) we covered how to put another SVG on top of ours. But here we're going down the CSS route. Example flags will be Russia, Kazajhstan, Iran and Mexico.

Grayscale / Greyscale / Black & White - CSS only

Nobody seems to agree in how to call this, but I will reveal it to you on the code (grayscale!!!). But the concept is pretty simple: we have these wonderfully colored flags; but for whatever reason, we need them in black/white color schemes. So we go to CSS for help and... voilà! You can check compatibility at http://caniuse.com/css-filters/embed


<img src="/img/ru/ru-national.svg" class="tut4 tut4bw1"/>
<img src="/img/kz/kz-national.svg" class="tut4 tut4bw1"/>
<img src="/img/ir/ir-national.svg" class="tut4 tut4bw1"/>
<img src="/img/mx/mx-national.svg" class="tut4 tut4bw1"/>


.tut4 { width:128px; height:96px; background-size: contain; background-repeat: no-repeat; }
.tut4bw1 { filter: grayscale(100%); }

Grayscale cross-browser (No IE 9-11)

Since you're reading this, you know that thill will work gracefully in most cases. However... yeah, you guessed it: Internet Explorer 9-10-11 (simply impossible. No propietary filters and no CSS3), Microsoft Edge and Opera Mini do NOT support this. So guess what? Yes indeed, another rule for them. And then we need some more for IE 6-9 and some for older webkit browsers. Fancy crap, i tell you. To check the results, go to https://netrenderer.com/.

The CSS I've written here allows us to visually convert an image to black and white on the fly in our browser, with no need to save new versions in PhotoShop. Using CSS also makes the image much easier to modify: for example, you’ll see that lowering the percentage used in our declaration from 100% to 50% causes a visual blend of the desaturation effect with the original color image.


<img src="/img/ru/ru-national.svg" class="tut4 tut4bw2"/>
<img src="/img/kz/kz-national.svg" class="tut4 tut4bw2"/>
<img src="/img/ir/ir-national.svg" class="tut4 tut4bw2"/>
<img src="/img/mx/mx-national.svg" class="tut4 tut4bw2"/>


.tut4 { width:128px; height:96px; background-size: contain; background-repeat: no-repeat; }
.tut4bw2 {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

Other CSS Filters

CSS Filters are a powerful tool that authors can use to achieve varying visual effects. Let's try some out!


<img src="/img/ru/ru-national.svg" class="tut4 tut4f1"/>
<img src="/img/kz/kz-national.svg" class="tut4 tut4f2"/>
<img src="/img/ir/ir-national.svg" class="tut4 tut4f3"/>
<img src="/img/mx/mx-national.svg" class="tut4 tut4f4"/>
<img src="/img/ru/ru-national.svg" class="tut4 tut4f5"/>
<br />
<img src="/img/kz/kz-national.svg" class="tut4 tut4f6"/>
<img src="/img/ir/ir-national.svg" class="tut4 tut4f7"/>
<img src="/img/mx/mx-national.svg" class="tut4 tut4f8"/>
<img src="/img/ru/ru-national.svg" class="tut4 tut4f9"/>


.tut4 { width:128px; height:96px; background-size: contain; background-repeat: no-repeat; }
.tut4f1 { filter: blur(2px); }
.tut4f2 { filter: -webkit-filter: sepia(1); filter: sepia(1); }
.tut4f3 { filter: -webkit-filter: saturate(3); filter: saturate(3);}
.tut4f4 { filter: -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
.tut4f5 { -webkit-filter: invert(.8); filter: invert(.8); }
.tut4f6 { -webkit-filter: opacity(.2); filter: opacity(.2); }
.tut4f7 { -webkit-filter: brightness(3); filter: brightness(3); }
.tut4f8 { -webkit-filter: contrast(4); filter: contrast(4);}
.tut4f9 { -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9)); filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));}

Limitations & Conclusions

Of course, having all the IEs out of the window, only partial support in Edge and no Opera Mini, it means that roughly a 15% of the world can't see the CSS filter alone and will need the SVG. But that percentage will only grow smaller every day, so feel free to use the filters, which have >85% compatibility around the globe.

Benji Frugoni

If you liked this tutorial and want more, consider becoming my Patreon :-)

Download full demo