DEV Community

Cover image for LGBTQ+ Flags Coded in CSS
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

LGBTQ+ Flags Coded in CSS

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 😉). 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

Top comments (23)

The discussion has been locked. New comments can't be added.
This article is bringing negative attention and inappropriate comments. Locking discussion for now.
Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Fun with flags with Sheldon Cooper 😂

Collapse
 
erinposting profile image
Erin Bensinger • Edited

This is amazing, Alvaro!! I so appreciate the attention you put into researching and sharing the history of each of these flags, and the wide variety you've represented in your final CodePen here — not to mention all the hard CSS work!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thank you! :)

Collapse
 
vulcanwm profile image
Medea

Woah nice!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
roman_22c01bcfb71 profile image
Roman

Amazing Job!

Collapse
 
baenencalin profile image
Calin Baenen

Amazing post! I'm glad I got to see a lot of wonderful flags! I even learned a new term, "metagender".
I even saw þree of my own.

Good job wiþ ðe CSS.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks :)

Collapse
 
clawfire profile image
Thibault Milan

Amazing work. The bear flag is missing the paw but it's a veeeeeeery tricky one to do 😄

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Ooops! You caught me 😅
...Let's just pretend it's the back of the flag... 😋

Collapse
 
michaeltharrington profile image
Michael Tharrington

What an awesome collection of flags! This is so dope. Thank you for sharing this, Alvaro. 🙌

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks 🙏

Collapse
 
tzwel profile image
tzwel

lmao the mass reporting and deletion in the comments section

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

I don't know if it can be considered "mass reporting and deletion" when it's only 3 comments reported/deleted (from what I can see):

  • One was an insult (someone got so offended by the article that their reaction was a simple "F U").
  • Another one is suggesting adding a flag that is considered hateful and used by nazi groups.
  • Another is in the line of "why? they are not worth this, we should do something else!"

If they are out of ignorance or just to troll, it doesn't matter. They seem properly moderated in my opinion.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I stand corrected. It seems that this article is bringing too much negative attention. It is sad, but I'll be locking the comments.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.