Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CSS-only implementations of the Scandinavian countries’ national flags.



Back from 2015’s Mönki Gras conference, its ‘Nordic Craft Culture and Tech’ theme resonated with me. After a couple of days of those ever-present flags with the Scandinavian cross, I think I fell in love with its simplicity and shared history.

Since the flag designs are quite simple and similar, I decided to try to replicate them using only CSS (or Sass, more precisely).


Currently, all the 5 main Scandinavian flags are available:

  • Denmark
  • Finland
  • Iceland
  • Norway
  • Sweden



A red field charged with a white cross extending to the edges; the vertical part of the cross is shifted to the hoist side. Dimensions: 3:1:3 width / 3:1:4.5 to 3:1:5.25 length. — from Wikipedia

Ratio: 28:37
Vertical proportions: 12:4:12
Horizontal proportions: 12:4:21
Colours: red (Pantone 186C, R:210 G:16 B:52), white


Sea-blue Nordic cross on white field. — from Wikipedia

Ratio: 11:18
Vertical proportions: 4:3:4
Horizontal proportions: 5:3:10
Colours: white, blue (Pantone 2945C, R:0 G:82 B:165)


A white-fimbriated red Nordic cross on a blue field — from Wikipedia

Ratio: 18:25
Vertical proportions: 7:1:2:1:7
Horizontal proportions: 7:1:2:1:14
Colours: blue (Pantone 2945C, R:0 G:82 B:165), white, red (Pantone 1795, R:215 G:31 B:41)


A white-fimbriated blue Nordic cross on a red field — from Wikipedia

Ratio: 8:11
Vertical proportions: 6:1:2:1:6
Horizontal proportions: 6:1:2:1:12
Colours: red (Pantone 186C, R:210 G:16 B:52), white, blue (Pantone 301, R:0 G:85 B:155)


Blue with a yellow/gold Scandinavian cross that extends to the edges of the flag. Dimensions: 5:2:9 horizontally and 4:2:4 vertically. — from Wikipedia

Ratio: 5:8
Vertical proportions: 4:2:4
Horizontal proportions: 5:2:9
Colours: blue (Pantone 301, R:0 G:85 B:155), yellow (Pantone 116C, R:255 G:206 B:0)

Basic technique

  • A single HTML element for the flag itself, a div.
  • A single class addition will show the flag, like .flag-norway, for example.
  • On 2-colours flags, the ::before pseudo-element is the vertical bar and ::after is the horizontal bar.
  • On 3-colours flags, a different technique is employed: the vertical bar is achieved setting a linear gradient as the <div>’s background, using hard stops to set the limits of each colour; the ::after pseudo-element is reponsible for the inner horizontal bar, and the outer horizontal bar is the ::before, with a transparent bit to not cut the vertical bar.

Why not use the same technique for both?

I could, in fact, use the latter technique for both situations (flags with 2 or 3 colours), but I prefer to have two different approaches for two different problems: when 2 pseudo-elements are enough and when you (apparently) need more.


Currently, all the dimensions & ratios are dependent on a single dimension, which is the height of the final flags (identified as $height-global on the file _base.css). I would like to change this, but I couldn’t find a way to do so, CSS-only. So, if you want flags with different dimensions, just change that variable to the height you want, compile the Sass and use the CSS.

Browser compatibility

All flags work on Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+. Flags with three colours (Norway and Iceland) don’t work on IE 8 and 9 because of the gradients technique used. I tried to keep the CSS generated simple and minimal, so if you want to broad the compatibility of this project, checkout CSS-Tricks for more info.


I have included a Makefile with the following targets:

  • build — Default action, compiles the Sass code & minifies the resulting CSS.
  • watch — Compiles the Sass code & minifies the resulting CSS, watching the project’s SCSS files for modifications and repeating the process.
  • test — Helps with debugging; runs build, opens test/index.html (a kind of playground page) and then runs watch.
  • clean — Removes any disposable folder, like css/ and .sass-cache/.

Further reading


CSS-only implementations of the Scandinavian countries’ national flags.