Alvaro Montoro's Blog
LGBTQ+ Flags Coded in CSS

LGBTQ+ Flags Coded in CSS

The meaning behind different LGBTQ+ flags and how to code them with CSS and a single HTML element.

Alvaro Montoro's photo
Alvaro Montoro
·

8 min read

June is Pride Month. And In this article, I will review some of the main LGBTQ+ flags out there and how we can code them in CSS and a single HTML element (keeping them responsive so that they could be double as icons.)

I am not going to show how to code all the flags. There are dozens of them, and many are versions of the same idea but with different colors. So I will only add the code for one of the flags and not talk about the "derivative" versions. At the bottom of the article, you can find a demo with 35 different LGBTQ+ flags coded in CSS.

The Flags

Gilbert Baker Pride Flag

American gays used the pink triangle to symbolize the gay movement (see below), but it had a dark past. In the 1970s, filmmaker Artie Bressan, Jr, and political activist Harvey Milk asked Gilbert Baker to develop a new symbol. Something that could represent hope, freedom, and a "rebirth" of the movement. And in 1977, he designed a flag with eight colors, each of them with its meaning: pink for sex, red for life, orange for healing, yellow for sunlight, green for nature, turquoise for magic/art, blue for serenity, and violet for spirit.

The flags consisting of horizontal lines are simple to build in CSS. We use a linear-gradient defining the stop points for each color. For example, there are eight colors in the case of the Gilbert Baker's flag, so the stop points will happen in the multiples of 12.5% (because 100 / 8 = 12.5). We can even use HTML colors for this one: hotpink, red, orange, yellow, green, darkturquoise (closer to the original color than turquoise), blue, and indigo.

1978 Pride Flag

The flag was modified to remove the hot pink bar one year later. It was not a political choice (nothing to do with pink representing sex), but a practical one: materials with that pink color were difficult to come by, so they decided to drop it so they could keep up with the demand for rainbow flags (which had increased after Harvey Milk's murder.)

Like the Gilbert Baker flag, we will use a linear-gradient. But this time, it has seven colors, making it a little more complicated (but not much). The trick: round the numbers to two decimals (or use the verbose calc() function). The flag won't be 100% perfect, but it will be indistinguishable.

Traditional Gay Pride Flag

One year later, in 1979, the flag lost another color. This time it was for cosmetic reasons: they were going to split the flag in two to decorate the street lamps in the San Francisco parade route, and they needed an even number of colors, so they reduced it to six (three on each side of the street lamp.) Turquoise was then dropped.

This flag is similar to the previous ones in CSS: a linear-gradient, with six stops this time, making things slightly more straightforward than when there were seven stops. This time, it will be multiples of 16.66% (16.66, 33.33, 50, etc.)

Progress Pride Flag

An updated version of the Traditional Gay Pride flag has become popular in recent years. It includes black and brown stripes symbolizing people of color and the same light blue, pink, and white as the Transgender flag. The black line has two meanings: it represents Black people and honors and serves as a memorial for those lost to HIV/AIDS.

To draw this flag in CSS, we start from the code of the previous flag (Traditional Gay Pride Flag) and then add conic gradients to form the triangles on the left side. One problem with using conic gradients, in this case, is that the lines may be too sharp and look pixelated. To avoid this, we could use pseudo-elements or two linear gradients (but this brings different problems because Chrome has issues with gradients with more than four stops).

Pink Triangle Flag

The pink triangle is a symbol of oppression. The nazis used an inverted pink triangle (or "die Rosa-Winkel") to identify homosexuals, who suffered the harshest conditions in the camps. Gay people wore it decades later to remind the past and a commitment to prevent history from repeating itself.

In CSS, an easy way to draw a triangle is using a conic-gradient. In this case, we would want to have a conic gradient with origin at the center of the bottom (at 50% 100%) and a starting degree of 330 (from 330deg). That way, it will generate an equilateral triangle):

Ally Pride Flag

This flag has an unknown origin. It was created in the late 2000s, and it symbolizes the heterosexual and cisgender (black and white stripes) people's support of the LGBTQ+ community and their fight for equality and representation. The rainbow flag colors are shaped into an A for "ally."

This flag is the last variation of Gilbert Baker's flag in the article. We can do the black and white strips using a repeating-linear-gradient and then use a pseudo-element to put the Traditional Gay Pride Flag on top, cutting the A shape using clip-path.

Intersex Pride Flag

The Intersex Pride Flag is different from the flags we've seen so far. It is on purpose. OII Australia created it with gold and violet colors (considered gender-neutral) and a circle representing wholeness and completeness.

From a coding perspective, the Intersex Pride Flag is straightforward: a basic radial gradient will do (and the colors are available as HTML named colors: gold and darkviolet). The only important thing is to remember to add the keyword circle so it's a circle and not an ellipse (as the flag is not squared.)

Pride of Africa Flag

This flag was created by the creative agency Joe Public United to represent the diversity of Africa's LGBTQ+ME community during Johannesburg Pride 2019. I honestly don't know how mainstream and extended this flag is (there are many versions online, which would go along with keeping the diversity it wants to represent), but I have to say, it is a breath of fresh air.

From a CSS perspective, the Pride of Africa flag is a great challenge (or a nightmare; it depends on how fond you are of the language): linear, radial, conic, and repeating-linear gradients everywhere, different positions, sizes, and colors. My version of this flag is not perfect, but I had fun coding it.

Labrys Lesbian Pride Flag

This flag is symbolic (and bad-ass): the labrys is a mythical double-bitted ax used by the Amazons; the inverted black triangle has a similar origin as the pink triangle, and the color violet is associated with Lesbianism. Unfortunately, the flag is not widespread mainly for two reasons: a gay man designed it, and some transphobic groups tried to associate themselves with the labrys.

This cool-looking flag is relatively easy to code in CSS by using masks (for the ax). We start with the pink triangle as the base (changing the colors and sizes) and then use the ::before and ::after pseudo-elements to draw the blade and handle of the labrys.

Other flags

Many other LGBTQ+ flags represent different groups within the community: Lesbian, Demiromantic, Abrosexual, Non-binary, Asexual, etc. There are also many variations of the Traditional Gay Pride Flag.

I did not focus on those because they are primarily derivative of the flags above (stacked horizontal lines of different colors) and can be achieved by adjusting the values of the flags we've done already. For example:

  • The Pansexual Pride Flag is similar to the Genderqueer Pride Flag, but with pink, gold, and light blue.
  • The Lesbian Pride Flag is identical to the 1978 Pride Flag (7 bars) but with different orange, white, and pink shades.
  • The Aromantic Pride Flag is similar to the Transgender Pride Flag, but with green, white, gray, and black.
  • The Demisexual Pride Flag is a linear gradient close to (but not similar) to the Bisexual flag, adding a conic-gradient like in the Progress Pride flag.
  • And so on.

The Bisexual Pride Flag falls under this category, too: we could code it from the Transexual Pride Flag, using the same color for the first and second bars and another color for the fourth and fifth bars.

I coded 35 LGBTQ+ flags in CSS with a single HTML element (plus, they are responsive and could be easily used as icons ;P). You can see them in this CodePen demo:

Conclusion

This article reviewed some history and the reasoning behind some of the most iconic LGBTQ+ flags used today.

Also, we have practiced CSS a little. In particular, background images and gradients (linear, radial, conic, and repeating linear), and also pseudo-elements, clip-paths and masks, and colors.

Hopefully, you enjoyed the article and learned a little about history, CSS, or both. I enjoyed writing it and researching the flags and how they came to be. Thanks for reading.

Reference

Did you find this article valuable?

Support Alvaro Montoro's Blog by becoming a sponsor. Any amount is appreciated!

CSSHTMLWeb Developmentlgbtqia+pride