CSS gradients flag gallery

2015-Jul-26 16:10

Country flags built only using CSS gradients. You can edit it live, press Reset to default buttons to reset to the original contents. When editing, note that the div bearing the style will disappear while the CSS is in inconsistent state.

You can see all the flags in SVG format on Wikipedia. I used them as a model. Links to flags from this page are provided below.

Note that I used percentages / em lengths for easier reading, so this works at 100% zoom and default font size, you could see misalignments if these are changed, especially in the cases of percentages with decimals.

BahamasWikipedia original

FinlandWikipedia original

GreeceWikipedia original

JamaicaWikipedia original

LaosWikipedia original

NorwayWikipedia original

Saint LuciaWikipedia original

SeychellesWikipedia original

SwitzerlandWikipedia original

TanzaniaWikipedia original