Benjamin Chadwick

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 details.

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.

UK

The world-famous Union Jack, made entirely with linear gradients. Source for the construction sheet and details: Wikipedia.

US

Another very popular flag. Here I used linear-gradient for the stripes, together with pseudo-elements and box-shadow for the stars. Again, Wikipedia gave me all the details I needed.

South Korea

The South Korean flag was interesting as it involved pseudo-elements as well as linear and radial gradients. Thanks again Wikipedia.

Europe

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.

Amsterdam

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 border, text-shadow and transform: rotate(). I didn't need a construction sheet, I just used this image.