The Intersex Pride Flag is different from the flags we've seen so far. 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. This flag is the last variation of Gilbert Baker's flag in the article. The rainbow flag colors are shaped into an A for "ally." 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. That way, it will generate an equilateral triangle): 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). In CSS, an easy way to draw a triangle is using a conic-gradient. Gay people wore it decades later to remind the past and a commitment to prevent history from repeating itself. The nazis used an inverted pink triangle (or " die Rosa-Winkel") to identify homosexuals, who suffered the harshest conditions in the camps.
The pink triangle is a symbol of oppression. 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). One problem with using conic gradients, in this case, is that the lines may be too sharp and look pixelated.
#Radial gay pride flags code#
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. The black line has two meanings: it represents Black people and honors and serves as a memorial for those lost to HIV/AIDS. It includes black and brown stripes symbolizing people of color and the same light blue, pink, and white as the Transgender flag. This time, it will be multiples of 16.66% (16.66, 33.33, 50, etc.)Īn updated version of the Traditional Gay Pride flag has become popular in recent years. 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 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. One year later, in 1979, the flag lost another color. The flag won't be 100% perfect, but it will be indistinguishable.
The trick: round the numbers to two decimals (or use the verbose calc() function). But this time, it has seven colors, making it a little more complicated (but not much). Like the Gilbert Baker flag, we will use a linear-gradient. 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.) The flag was modified to remove the hot pink bar one year later. 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. 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 use a linear-gradient defining the stop points for each color. The flags consisting of horizontal lines are simple to build in CSS. 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. Something that could represent hope, freedom, and a "rebirth" of the movement. In the 1970s, filmmaker Artie Bressan, Jr, and political activist Harvey Milk asked Gilbert Baker to develop a new symbol. At the bottom of the article, you can find a demo with 35 different LGBTQ+ flags coded in CSS.Īmerican gays used the pink triangle to symbolize the gay movement (see below), but it had a dark past.
So I will only add the code for one of the flags and not talk about the "derivative" versions. There are dozens of them, and many are versions of the same idea but with different colors.
#Radial gay pride flags how to#
I am not going to show how to code all the flags. 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.)