Alvaro Montoro Presents: Fun with Flags… with CSS

In this article, we will review CSS gradients by creating different flags using a single HTML element for each of them. As part of the experience, we will also check the ::before and ::after pseudo-elements, and the clip-path property.

We will code simple flags and avoid coding the coats of arms as they would be tough in CSS. It wouldn't be impossible, but it's not a task worth doing either. Use SVG for that.

I used the Wikipedia page for the different flags to get dimensions, sizes, positions, and colors. My apologies in advance if they include any errors.

Setting the Stage

Let's start by adding what will be the HTML code of our flags, and some common styling:

<div class="flag"></div>

.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Here's a short explanation of what they do:

• display: inline-grid: This will treat the element (almost) like an image and display it in line with the text. Using inline-flex or inline-grid will provide more powerful alignment possibilities.
• height: 1em: Different flags have different sizes. By setting a fixed height, we can add the aspect-ratio property to generate the appropriate width, while keeping all the flags with a consistent height.
• position: relative: If we need pseudo-elements, they will likely need an absolute position, and we want to make our flag the point of reference for that absolute positioning.
• overflow: hidden: If the pseudo-elements overflow the container for any reason, we want to hide the overflow from view.
• vertical-align: top: placing the flags in line with the text will make them look nicer, as their alignment will be "more natural."

Some of these are over-engineering –yes, you can over-engineer CSS– because most flags will not need them. Especially the ones that we will code in this article… but eventually you'll find some that require the properties, and why not have them directly in the class, instead of having to add them individually several times?

---

Linear Gradients

A linear gradient creates a progressive color transition in a single direction (along a line, thus the name). By default, the direction is vertical from top to bottom, which makes creating flags simple.

Poland

Let's start with Poland's flag. It has two colors that occupy the same height: the top is white, and the bottom is red. This is one of the simplest gradients you'll find.

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

This gradient sets white as the color from the top until it reaches 50% (half the flag), and then it changes to red, which starts at 50% too.

We also added an aspect-ratio: 8 / 5; because that is the official proportion for the flag of Poland (5:8). Feel free to ignore that property in the following examples, but remember to add it or the flag will not have a width and will be invisible!

---

Germany

CSS gradients are not limited to two colors, they can have as many as you want –but notice that some browsers may not display the gradient correctly if there are too many colors.

One example of this would be Germany's flag, where we'll have three colors from top to bottom:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

We made the notation of this example multiline and extra lengthy on purpose. Notice how we added two values after the value. They are the starting and end stops for each color respectively. In the example above, black will start from the top (0%) and go to one-third of the flag (33.33%), red will begin directly after (33.33%) and go to two-thirds of the flag (66.66%), and finally, yellow will start directly after 66.66% and go until the bottom of the flag (100%). In the case of a flag, the end and following start values will match, but if they don't, the browser will transition the colors progressively.

Considering that the first color will start at 0, and the last one will end at 100% by default, we can eliminate those values from the linear gradient. Also, any starting value lower than the previous end will cause a sharp stop between the colors. We want that for our flags and don't want to type too much, so we can just put the lowest value we can for the start value: 0% or just 0. That way, the CSS above would be reduced to something that yields a similar result, but that is considerably shorter:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

---

Belgium

It would be boring –and useless– if we could only generate vertical linear gradients. There are ways to change the direction the gradient will be drawn. Let's check a couple of them:

• Specifying a direction with keywords: do you want the colors to go from right to left? Indicate it with the to left keywords before the color list. From bottom to top? to top. Diagonally from bottom left to top right? Use to top right. It is really that simple!
• Specifying the angle of action: could be tricky, but it offers more possibilities than the previous option. You can pick any direction by indicating the angle of action, instead of being limited to eight. In this case, 0deg will be from bottom to top, 90deg will be left-to-right, 180deg top-to-bottom, and 270deg (or -90deg) will be right-to-left.

Let's take Belgium's flag as an example. The colors are not stacked vertically but horizontally: black, yellow, and red respectively from left to right. We can achieve this in at least two different ways:

.flag.belgium {
  aspect-ratio: 15 / 13;
  /* option 1 */
  background: linear-gradient(to right, #000 33.33%, #fdda24 0 66.66%, #ef3340 0);
  /* or option 2 */
  background: linear-gradient(90deg, #000 33.33%, #fdda24 0 66.66%, #ef3340 0);
}

---

Radial Gradients

A radial gradient creates a progressive color transition from one origin point out to all directions, generating a radial effect that looks like an ellipse of color (or a circle if the sides are equal). By default, that point is the element's absolute center –horizontally and vertically.

A couple of important things to take into account:

• It generates an ellipse, not a circle. If the container is rectangular, it will look like an ellipse. If the container is a square, it will look like a circle. There are keywords (circle) to guarantee that the resulting shape will be circular and not an ellipse.
• The size of the ellipse varies with the container and its position (more on this shortly). 0% will be the point of origin and 100% will be the farthest corner to that origin. We can use keywords (closest-side, farthest-side, closest-corner, etc.) to change this.

With these initial thoughts in mind (and keywords), let's create some flags!

Japan

The flag of Japan is a big red circle in the center of a white flag. This is one of the simplest radial gradients we can find, and we will get to use the circle keyword that we reviewed earlier, because the flag is rectangular, and if we don't use it, we'll get an ellipse instead.

.flag.japan {
  aspect-ratio: 3 / 2;
  background: radial-gradient(closest-side circle, #bc002d 60%, #fff 0);
}

We combined the closest-side size keyword, with the circle shape keyword to generate a circle that is 60% of the height (as the top and bottom sides are closer than the left and right).

---

Bangladesh

If we could only create circles and ellipses from the element's center, we could replicate some flags with CSS (e.g. Laos or Burundi). Still, we couldn't develop others with circles off-center (e.g. Costa Rica or Ethiopia).

The radial-gradient() method allows us to indicate the point of origin of the gradient. We do it by using at posX posY after the size and shape keywords (if any). Let's try to create Bangladesh's flag with it:

.flag.bangladesh {
  aspect-ratio: 5 / 3;
  background: radial-gradient(closest-side circle at 45% 50%, #f42a41 66.66%, #006a4e 0);
}

What happens when we start moving the center of the gradient? The distance to the farthest corner changes! That will lead to trigonometric calculations to adjust the size accordingly… or instead, we could identify a different point of reference that isn't the farthest corner (like closest-side in this case).

To avoid this, we can specify an absolute size for width and height. If we do that, we won't be able to identify if it's a circle or an ellipse because those absolute values will determine the shape.

---

Conic Gradients

A conic gradient creates a progressive color transition from one origin point rotating around it clockwise. It may sound complex to visualize like that, so I prefer to use an example when I explain it to people: imagine a regular linear gradient printed on a paper (so far, so good); now you take the paper, fold over one side and roll it into a cone (thus the name!) The resulting figure will look like a conic gradient from above. I hope that was helpful.

As with the radial gradients, a conic gradient's default point of origin is the element's absolute center. Also as the radial gradients, we can change that point by using at posX posY.

Benin

This is a fairly simple flag to create with a conic gradient. First, we need to position the center at 40% horizontally and 50% vertically, then specify the stopping points.

.flag.benin {
  aspect-ratio: 3 / 2;
  background: conic-gradient(at 40% 50%, #fcd20f 25%, #e90929 0 50%, #008850 0);
}

As I said, piece of cake! As there is not much to it, here's a fact you may not know about the flag of Benin: yellow represents the nation's treasures, red represents the courage of their ancestors, and green represents the hopes of democracy.

---

Czech Republic

Based on that, let's see a way of drawing the flag of the Czech Republic:

.flag.czech-republic {
  aspect-ratio: 3 / 2;
  background: conic-gradient(#fff 25%, #d7141a 0 65.65%, #11457e 0 84.35%, #fff 0);
}

This works just fine, but notice how we are using #fff two times. Wouldn't it be nice if we could use it only once? As you may have guessed, the answer is that we can! A gradient gradient doesn't necessarily need to start from the 0deg. We can specify a starting position using from [angle].

For example, let's say that we want to start from the red color:

.flag.czech-republic {
  aspect-ratio: 3 / 2;
  background: conic-gradient(from 90deg, #d7141a 40.65%, #11457e 0 59.35%, #fff 0);
}

The angle can be a positive or negative value, then we'd be moving the starting point clockwise or counter-clockwise, respectively.

---

Combining Gradients

We have learned how to use linear, radial, and conic gradients to generate relatively simple flags… but sometimes flags can get complicated and a single gradient won't do. What can we do in that case?

CSS allows multiple background images (and gradients) in an element. We need to separate their values with a comma. As it may be counterintuitive, one important thing to remember is that the top backgrounds will overlap and hide the bottom ones.

Sweden

The flag of Sweden is a yellow cross over a blue background. We can generate each yellow bar using a linear gradient transparent-yellow-transparent:

.flag.sweden {
  aspect-ratio: 8 / 5;
  background:
    linear-gradient(#0000 0.4em, #ffcd00 0 0.6em, #0000 0),
    linear-gradient(90deg, #005293 0.5em, #ffcd00 0 0.7em, #005293 0),
    #005293;
}

This example has more than meets the eye: 

• It shows how to combine more than one gradient –separating them with commas.
• It adds a background color. Notice how the color will always be last in the list of backgrounds. If you place it anywhere else on the list, it will be invalid and not display any background.
• It uses absolute units. We have been using percentages for the gradients so far, but there's no reason not to use other units when convenient.

---

Bahamas

While the previous flag showed multiple gradients in action, it was not great to showcase how they stack as it used transparencies. So, let's see another example –One that uses multiple gradients of different types.

.flag.bahamas {
  aspect-ratio: 2 / 1;
  background:
    conic-gradient(at 43.3% 50%, #0000 240deg, #000 0 300deg, #0000 0),
    linear-gradient(#00778b 33.33%, #ffc72c 0 66.66%, #00778b 0);
}

When combining backgrounds, you are not limited to only one gradient type. You can use any kind.

---

Changing Sizes and Positions

So far, we've seen linear, radial, and conic gradients, and how they can be combined. But in all cases, the gradient occupied the whole flag. Some transparencies may not make it look that way, but the gradients' size was always 100% of the width and height.

But there are ways of changing the gradient's size to fit better our needs. The simplest one is to specify a background-size. If the size is smaller than the container, the background will repeat (unless we use something like background-repeat: none.)

Qatar

Let's review an example with the flag of Qatar. The flag repeats a pattern nine times and can be easily replicated with a conic gradient. If we specify that the gradient's width should be 100% of the flag, and its height one-ninth of the flag's height, the browser will repeat the background until the container is filled, completing the drawing for us.

.flag.qatar {
  aspect-ratio: 28 / 11;
  background: conic-gradient(from 249deg at 37.5% 50%, #fff 42deg, #8A1538 0);
  background-size: 100% calc(100% / 9);
}

---

Sweden... again!

Of course, once we specify a size, we can also specify the position where the gradient will be located. We would do that with background-position (and this is where the background-repeat property will come in handy).

.flag.sweden {
  aspect-ratio: 8 / 5;
  background: linear-gradient(#fc0 0 0), linear-gradient(#fc0 0 0), #005293;
  background-size: 0.2em 100%, 100% 0.2em;
  background-position: 0.5em 0, 0 50%;
  background-repeat: no-repeat;
}

Notice that we don't need to specify a size and position for the last color. You can only set one that will automatically occupy the whole container.

We can separate the values of the background images, sizes, and positions with commas. That is convenient when there are only a few of them, but it can be a real pain in the neck if we have several backgrounds. It's easy to get lost and mix values.

Instead, we can use the short form of the background property to provide all values at once: background: gradient position / size repetition, like shown below:

.flag.sweden {
  aspect-ratio: 8 / 5;
  background:
    linear-gradient(#fc0 0 0) 0.5em 0 / 0.2em 100% no-repeat,
    linear-gradient(#fc0 0 0) 0 50% / 100% 0.2em no-repeat,
    #005293;
}

---

Repeating Gradients

We have seen linear, radial, and conic gradients, but each variation allows us to add "color patterns." Flags are perfect for this: many consist of repeating horizontal lines.

I am talking about the repeating- gradients. They behave the same as the regular gradients they repeat the specified pattern until it reaches 100% or 360 degrees. There are three repeating gradients:

• repeating-linear-gradient
• repeating-radial-gradient
• repeating-conic-gradient

Greece

Let's take the Greek flag as an example. We could have 3 or 4 big linear gradients to achieve it, or we can use three repeating linear gradients:

• One repeating linear gradient to generate the vertical part of the cross (using transparent and white)
• A second repeating linear gradient to generate the horizontal part of the cross (using blue and white)
• One last repeating linear gradient to draw the nine bars behind.

To achieve the cross at the top left, we must define both position and size for the first two linear gradients.

.flag.greece {
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(90deg, #0000 0 40%, #fff 0 60%)  0 0 / calc(5em / 9) calc(5em / 9),
    repeating-linear-gradient(#2175d8 0 40%, #fff 0 60%)  0 0 / calc(5em / 9) calc(5em / 9),
    repeating-linear-gradient(#2175d8 0 calc(100% / 9), #fff 0 calc(200% / 9));
  background-repeat: no-repeat;
}

---

Uganda

Uganda's flag has a beautiful grey-crowned crane that we will not code in CSS for practical reasons. We will focus on the other two flag parts: a white circle at the center and several horizontal lines in black, yellow, and red.

This composition can be achieved in two different ways:

• Using a repeating-linear-gradient that occupies the whole height of the flag; or
• With a single linear-gradient that occupies only half of the flag, the browser will automatically repeat it to fill in the remaining space.

The first option would be like this:

.flag.uganda {
  aspect-ratio: 3 / 2;
  background: 
    radial-gradient(closest-side circle, #fff 30%, #0000 0),
    repeating-linear-gradient(#000 0 16.666%, #fcdc04 0 33.333%, #d90000 0 50%);
}

The second option would look like this:

.flag.uganda {
  aspect-ratio: 3 / 2;
  background: 
    radial-gradient(closest-side circle, #fff 30%, #0000 0),
    linear-gradient(#000 0 33.33%, #fcdc04 0 66.66%, #d90000 0) 0 0 / 100% 50%
}

But both options end up looking the same. It is important to remember that in CSS, like in any other programming style, there is usually more than one way to achieve our goals.

---

Using Pseudo-Elements

The term "single-element flags" can be misleading. All non-empty HTML elements include –at least– two pseudo-elements that we can use to draw too: ::before and ::after. So we truly have three elements that can be styled separately and provide many possibilities:

• Drawings that require some rotation. One limitation of using backgrounds in CSS is that they cannot be rotated.
• Complex shapes that could benefit from the power of using border-radius, clip-path, mask...
• To make designs look cleaner: the edges of a clipped path are smoother than the ones of a gradient.

Bahrain

If you coded Qatar's flag using gradients as described above, you might have noticed that the gradient's triangular edges look too sharp and ugly on some monitors. There are many ways to solve this, but a solution I like is using a pseudo-element with clip-path to make smoother and cleaner lines.

This option will simplify the code compared to using several linear gradients and the pixel difference trick explained in the following section.

.flag.bahrain {
  aspect-ratio: 5 / 3;
  background: #da291c;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    clip-path: polygon(0 0, 25% 0, 40% 10%, 25% 20%, 40% 30%, 
                            25% 40%, 40% 50%, 25% 60%, 40% 70%, 
                            25% 80%, 40% 90%, 25% 100%, 0 100%);
  }
}

The pseudo-elements in this case don't have to be limited to complex patterns. Take for example the flags of Cuba, Bahamas, or Jordan. They have triangles on the left side that we drew using conic gradients. Those gradients have an issue: the edges will look too hard or pixelated on certain monitors –there's a trick to solve this with linear gradients in the following section–. Instead, we could create the triangle with a pseudo-element (a three-point polygon path) and the edges will look smoother. Similar to the flag of Bahrain above.

---

Panama

I got the approximate points of the vertex points for a five-point star and applied them using clip-path in the ::before and ::after pseudo-elements. Many CSS artists will consider using clip-path cheating, and the star can be drawn with conic gradients. But for simplicity, I'll leave it as a clip-path.

Adding a conic gradient as the flag background, and the stars in the pseudo-elements, we can draw the flag of Panama in no time:

.flag.panama {
  aspect-ratio: 3 / 2;
  background: conic-gradient(#c8102e 25%, #fff 0 50%, #005eb8 0 75%, #fff 0);

  &::before, &::after {
    content: "";
    position: absolute;
    width: 18%;
    aspect-ratio: 153 / 145;
    clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 62%, 81% 100%, 50% 76%, 19% 100%, 31% 62%, 0% 38%, 38% 38%, 50% 0%);
    background: #005eb8;
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
  }

  &::after {
    top: 75%;
    left: 75%;
    background: #c8102e;
  }
}

---

Reminders and Tips

Stacking Gradients

Remember that when you combine backgrounds, they will stack in the order they are listed. That means, the first one will go on top and overlap the ones below, and subsequently.

While it makes sense from a designing perspective, it may be counterintuitive from a CSS point of view, where the cascade makes the last appearance of a property or class take precedence over the ones previously defined.

The 1px Difference Trick

In the article, I mentioned how the gradient edges may look too sharp or pixelated. This happens because of how the browser renders the gradients –and it's annoying, especially because it doesn't happen for hard-stop edges on SVG.

For example, the line here may not look great on all monitors:

.flag-with-line {
  background: linear-gradient(30deg, #f00 50%, #00f 0);
}

A trick to avoid this is adding a pixel difference between the endpoint and the next beginning point. Either by subtracting or adding 0.5px respectively from each of them or, simpler, just subtracting/adding 1px from one of them. This line will look smooth on all the monitors:

.flag-with-line {
  background: linear-gradient(30deg, #f00 calc(50% - 1px), #00f 50%);
}

Don't Forget the 0 in Repeating Gradients

A common mistake when working with repeating gradients is not adding a start point for the first color. This will cause the gradient to look funky. If your repeating gradients are not working as expected, always verify that you added a 0 (or whatever value) there!

Don't Be Scared of Pseudo-Elements

Pseudo-elements can be intimidating at first, but they are no more different than any other element, they are just attached to the HTML element with them.

Don't forget to add the content property with a value (an empty string is common when you only want it to appear). Otherwise, the pseudo-elements will not be visible!

Clip-Path is Your Friend

When drawing in CSS and creating CSS Art, many people will claim that using the clip-path property is cheating. It makes things easier and is a useful tool in your belt. I wouldn't discard it just because it's "cheating."

Learn how to use clip-path –and mask!– It will eventually come in handy in a project.

Conclusion

Now it's time for you to practice CSS gradients. Please give it a go and try to recreate some flags by yourself. Here's a list of countries with good flags to practice (sorted in order of complexity):

• Monaco
• Yemen
• United Arab Emirates
• Laos
• Iceland
• Dominican Republic (without the coat of arms)
• Saint Lucia

And remember: there's not a unique way of coding a flag. Each of them can be done in many different ways. Use the gradients you are more comfortable with or know will look best.

Comments

[Chris Jarvis]

My son knew all but one, Benin. but he did know it was an African flag.