World flags in pure CSS
Inspired by the Shapes of CSS
over at CSS-Tricks, I decided to try to make as many world flags as I could using
only CSS. Once I discovered gradients and shadows, I was well on my way.
The aim is to use as few
divs in the markup as possible. Some of these I
managed with a single element; others, not quite. See the individual examples for
All of these examples support all other modern browsers.
The visible CSS code is editable and will directly change the flags.
In each case, changing the
font-size will automatically adjust
everything else in proportion.
The world-famous Union Jack, made entirely with linear gradients. Source for the construction sheet and details: Wikipedia.
Another very popular flag. Here I used
for the stripes, together with pseudo-elements and
for the stars. Again,
gave me all the details I needed.
The South Korean flag was interesting as it involved pseudo-elements as well as linear and radial gradients. Thanks again Wikipedia.
I wrote this one during the run-up to the infamous referendum.
It's super simple: as all the stars are the same size and colour,
text-shadow was once again the tool of choice.
I worked out the construction directly from an image of the flag.
This is one of the few city flags to actually be flown on a regular basis. It received good publicity recently following a TED talk by Roman Mars.
Part of this flag's beauty lies in its simplicity.
I was able to knock it together in a couple of hours using
I didn't need a construction sheet, I just used