CSS Pride Flags

This project is intended as a fun way to play around with CSS background elements by building various pride flags with only one div element.

The code blocks on this page have the necessary styles to add to a div for use, as well as the hex values of the constituent colors of the flag.

This page was created by David Wolfpaw. The code for this page can be found on my Github.

LGBT Pride Flag

The most popular version of the pride flag was created in 1979 for San Francisco Pride.


#lgbt {
	background: linear-gradient(
		to bottom,
		#e40303,
		#e40303 16.67%,
		#ff8c00 16.67%,
		#ff8c00 33.33%,
		#ffed00 33.33%,
		#ffed00 50%,
		#008026 50%,
		#008026 66.67%,
		#004dff 66.67%,
		#004dff 83.33%,
		#750787 83.33%,
		#750787
		);
}

#e40303

#ff8c00

#ffed00

#008026

#004dff

#750787

Gilbert Baker Pride Flag

The original pride flag, created for San Francisco Pride and first flown in 1978.


#gilbert-baker {
	background: linear-gradient(
		to bottom,
		#ff69b3,
		#ff69b3 12.5%,
		#fe0000 12.5%,
		#fe0000 25%,
		#ff8e00 25%,
		#ff8e00 37.5%,
		#ff0 37.5%,
		#ff0 50%,
		#008d00 50%,
		#008d00 62.5%,
		#00c1c0 62.5%,
		#00c1c0 75%,
		#3f0097 75%,
		#3f0097 87.5%,
		#90008e 87.5%,
		#90008e
		);
}

#ff69b3

#fe0000

#ff8e00

#ff0

#008d00

#00c1c0

#3f0097

#90008e

Inclusive Pride Flag

First adopted in 2017 for Philly Pride, this flag was designed by the marketing firm Tierney and adds black and brown stripes to the top of the flag to bring attention to people of color in the queer community.


#inclusive {
	background: linear-gradient(
		to bottom,
		#000,
		#000 12.5%,
		#784f16 12.5%,
		#784f16 25%,
		#e40303 25%,
		#e40303 37.5%,
		#ff8c00 37.5%,
		#ff8c00 50%,
		#ffed00 50%,
		#ffed00 62.5%,
		#008026 62.5%,
		#008026 75%,
		#004dff 75%,
		#004dff 87.5%,
		#750787 87.5%,
		#750787
		);
}

#000

#784f16

#e40303

#ff8c00

#ffed00

#008026

#004dff

#750787

Progress Pride Flag

In 2018 the Progress Pride flag was designed by Daniel Quasar, which incorporates the Inclusive Pride flag and the Transgender flag.


#progress {
	background: linear-gradient(
		to bottom,
		#e40303,
		#e40303 16.67%,
		#ff8c00 16.67%,
		#ff8c00 33.33%,
		#ffed00 33.33%,
		#ffed00 50%,
		#008026 50%,
		#008026 66.67%,
		#004dff 66.67%,
		#004dff 83.33%,
		#750787 83.33%,
		#750787
		);
	overflow: hidden;
}
#progress:before {
	position: absolute;
	content: "";
	left: -31%;
	top: calc(-50% - 1px);
	width: 43%;
	height: 50%;
	background: linear-gradient(
		to bottom,
		#fff,
		#fff 40%,
		#f6a8b7 40%,
		#f6a8b7 55%,
		#5ccefa 55%,
		#5ccefa 70%,
		#784f16 70%,
		#784f16 85%,
		#000 85%,
		#000
		);
	transform: rotate(-135deg) skew(-45deg);
	transform-origin: 100% 100%;
}
#progress:after {
	position: absolute;
	content: "";
	left: -1%;
	top: 0;
	width: 43%;
	height: 50%;
	background: linear-gradient(
		to bottom,
		#fff,
		#fff 40%,
		#f6a8b7 40%,
		#f6a8b7 55%,
		#5ccefa 55%,
		#5ccefa 70%,
		#784f16 70%,
		#784f16 85%,
		#000 85%,
		#000
		);
	transform: rotate(-45deg) skew(45deg);
	transform-origin: 100% 100%;
}

#000

#784f16

#e40303

#ff8c00

#ffed00

#008026

#004dff

#750787

#5ccefa

#f6a8b7

#fff

Bisexual Pride Flag

The Bisexual Pride flag was created in 1998 by Michael Page to differentiate the bisexual community


#bisexual {
	background: linear-gradient(
		to bottom,
		#d60270,
		#d60270 40%,
		#9a4f96 40%,
		#9a4f96 60%,
		#0039a9 60%,
		#0039a9
		);
}

#d60270

#9a4f96

#0039a9

Transgender Pride Flag

Created in 1999 by Monica Helms, the Transgender Pride flag represents people whose gender identity doesn’t align with the sex they were assigned at birth.


#trans {
	background: linear-gradient(
		to bottom,
		#5ccefa,
		#5ccefa 20%,
		#f6a8b7 20%,
		#f6a8b7 40%,
		#fff 40%,
		#fff 60%,
		#f6a8b7 60%,
		#f6a8b7 80%,
		#5ccefa 80%,
		#5ccefa
		);
}

#5ccefa

#fff

#f6a8b7

Pansexual Pride Flag

The Pansexual Pride flag was created in 2010 to represent people who have sexual and romantic attractions regardless of gender.


#pansexual {
	background: linear-gradient(
		to bottom,
		#ff218c,
		#ff218c 33.33%,
		#fed800 33.33%,
		#fed800 66.67%,
		#21b1ff 66.67%,
		#21b1ff
		);
}

#ff218c

#fed800

#21b1ff

Polysexual Pride Flag

Designed by a Tumblr user with the screenname "Samlin" and released in 2012, the Polysexual Pride flag is meant to represent those who are attracted to multiple but not all genders.


#polysexual {
	background: linear-gradient(
		to bottom,
		#f61bb9,
		#f61bb9 33.33%,
		#07d669 33.33%,
		#07d669 66.67%,
		#1c92f5 66.67%,
		#1c92f5
		);
}

#f61bb9

#07d669

#1c92f5

Polyamorous Pride Flag

Jim Evans created the original Polyamorous Pride flag in 1995 to represent those who love multiple people. The flag was modified in 2017 to replace the pi symbol with an infinity hearts symbol.


#polyamorous {
	background: linear-gradient(
		to bottom,
		#001df5,
		#001df5 33.33%,
		#eb3323 33.33%,
		#eb3323 66.66%,
		#000 66.66%,
		#000
		);
}
#polyamorous:before {
	content: "𝝅";
	color: #fefb53;
	font-size: 64px;
	line-height: 1;
	position: absolute;
	top: calc(50% - 32px);
	left: calc(50% - 18px);
}

#001df5

#eb3323

#000

#fefb53

Asexual Pride Flag

The Asexual Pride flag came from a design competition held by AVEN in 2010 for a flag to represent the asexual community, and incorporates the colors of the AVEN logo.


#asexual {
	background: linear-gradient(
		to bottom,
		#000,
		#000 25%,
		#a3a3a3 25%,
		#a3a3a3 50%,
		#fff 50%,
		#fff 75%,
		#820080 75%,
		#820080
		);
}

#000

#a3a3a3

#fff

#820080

Aegosexual Pride Flag

Aegosexuality is a sexual orientation under the spectrum of asexuality. Like other asexuals, aegosexuals lack the desire to be a participant in sexual activities themselves; however, distinguished by the tendency towards having sexual fantasies at times, despite feeling a disconnect between themselves and a sexual target/object of arousal.


#aegosexual {
	background: linear-gradient(
		to bottom,
		#000,
		#000 25%,
		#a3a3a3 25%,
		#a3a3a3 50%,
		#fff 50%,
		#fff 75%,
		#820080 75%,
		#820080
		);
}

#aegosexual::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top,
		#000,
		#000 25%,
		#a3a3a3 25%,
		#a3a3a3 50%,
		#fff 50%,
		#fff 75%,
		#820080 75%,
		#820080
	);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	content: "";
}

#000

#a3a3a3

#fff

#820080

Non-Binary Pride Flag

The Non-Binary Pride flag was created by Kyle Rowan in 2014 to represent people whose gender identity does not fit into a male/female binary.


#non-binary {
	background: linear-gradient(
		to bottom,
		#fdf52f,
		#fdf52f 25%,
		#fff 25%,
		#fff 50%,
		#9d5ad2 50%,
		#9d5ad2 75%,
		#000 75%,
		#000
		);
}

#fdf52f

#fff

#9d5ad2

#000

Genderqueer Pride Flag

Designed by Marilyn Roxie in 2011 to create visibility for people whose gender identity does not fit within the male/female binary.


#genderqueer {
	background: linear-gradient(
		to bottom,
		#b67edc,
		#b67edc 33.33%,
		#fff 33.33%,
		#fff 66.67%,
		#4b8124 66.67%,
		#4b8124
		);
}

#b67edc

#fff

#4b8124

Genderfluid Pride Flag

The Genderfluid Pride flag was created by JJ Poole in 2013 to represent people who have a gender expression/expressions or identity/identities that are not constant or fixed.


#genderfluid {
	background: linear-gradient(
		to bottom,
		#fe75a1,
		#fe75a1 20%,
		#fff 20%,
		#fff 40%,
		#be16d5 40%,
		#be16d5 60%,
		#000 60%,
		#000 80%,
		#333ebc 80%,
		#333ebc
		);
}

#fe75a1

#fff

#be16d5

#000

#333ebc

Lesbian Pride Flag

The five-stripe variant of the Lesbian Pride flag was created in 2018, though different Lesbian Pride flags have been in existence since at least 1999.


#lesbian {
	background: linear-gradient(
		to bottom,
		#d12601,
		#d12601 20%,
		#ff8f45 20%,
		#ff8f45 40%,
		#fff 40%,
		#fff 60%,
		#cf559b 60%,
		#cf559b 80%,
		#9b1a58 80%,
		#9b1a58
		);
}

#d12601

#ff8f45

#fff

#cf559b

#9b1a58

Aromantic Pride Flag

The Aromantic Pride flag was created by Tumblr user @cameronwhimsy in 2014 to represent those who do not experience romantic attraction.


#aromantic {
	background: linear-gradient(
		to bottom,
		#309c34,
		#309c34 20%,
		#9dce69 20%,
		#9dce69 40%,
		#fff 40%,
		#fff 60%,
		#a0a0a0 60%,
		#a0a0a0 80%,
		#000 80%,
		#000
		);
}

#309c34

#9dce69

#fff

#a0a0a0

#000

Intersex Pride Flag

Morgan Carpenter designed the Intersex Pride flag in 2013 to represent people born with physical sex characteristics that don't fit traditional male/female bodies.


#intersex {
	background: radial-gradient(closest-side circle at center,
		#ffd800 44%,
		#7902aa 44%,
		#7902aa 56%,
		#ffd800 56%
	);
}

#ffd800

#7902aa

Agender Pride Flag

The Agender Pride flag was created by Tumblr user transrants in 2014 represents Non-Binary individuals who do not identify as any gender.


#agender {
	background: linear-gradient(
		to bottom,
		#000,
		#000000 14.29%,
		#bcc4c7 14.29%,
		#bcc4c7 28.57%,
		#FFF 28.57%,
		#FFF 42.86%,
		#b7f584 42.86%,
		#b7f584 57.14%,
		#FFF 57.14%,
		#FFF 71.43%,
		#bcc4c7 71.43%,
		#bcc4c7 85.71%,
		#000000 85.71%,
		#000
		);
}

#000

#bcc4c7

#fff

#b7f584

Plushgender Pride Flag

The Plushgender Pride flag was created by Twitter user @roundhoundart in 2020 "for those who feel connected to soft pastels and textures, warm cuddles, and being a soft friendly presence".



#plushgender {
	background: linear-gradient(
		to bottom,
		#bdc4e0,
		#bdc4e0 20%,
		#ffe197 20%,
		#ffe197 40%,
		#fff9d8 40%,
		#fff9d8 60%,
		#ffd6aa 60%,
		#ffd6aa 80%,
		#ffb699 80%,
		#ffb699
		);
}

#bdc4e0

#ffe197

#fff9d8

#ffd6aa

#ffb699

Queer Pride Flag

The Queer Pride flag has a variety of forms created by DeviantArt user Pastelmemer in 2015 meant to represent non-normative sexuality under a broad umbrella.


#queer {
	background: linear-gradient(
		to bottom,
		#000,
		#000 11.11%,
		#9ad9eb 11.11%,
		#9ad9eb 22.22%,
		#00a4e7 22.22%,
		#00a4e7 33.33%,
		#b5e61d 33.33%,
		#b5e61d 44.44%,
		#fff 44.44%,
		#fff 55.55%,
		#ffc90c 55.55%,
		#ffc90c 66.66%,
		#fc6666 66.66%,
		#fc6666 77.77%,
		#feafc9 77.77%,
		#feafc9 88.88%,
		#000 88.88%,
		#000
		);
}

#000

#9ad9eb

#00a4e7

#b5e61d

#fff

#ffc90c

#fc6666

#feafc9

Demisexual Pride Flag

The Demisexual Pride flag was created to represent those who feel sexual attraction only after forming deep emotional bonds, and generally considered to be part of the asexual community.


#demisexual {
	background: linear-gradient(
		to bottom,
		#fff,
		#fff 40%,
		#66226a 40%,
		#66226a 60%,
		#d3d1d4 60%,
		#d3d1d4
		);
}
#demisexual:before {
	content: "";
	width: 0;
	height: 0;
	border-right: 90px solid transparent;
	border-bottom: 120px solid #000;
	border-left: 90px solid transparent;
	transform: rotate(90deg);
	display: block;
	position: absolute;
	top: 30px;
	left: -30px;
}

#000

#fff

#66226a

#d3d1d4

Demigirl Pride Flag

The Demigirl Pride flag was created by Tumblr user transrants in 2014 represents Non-Binary people who identify partially but not fully as a woman.


#demigirl {
	background: linear-gradient(
		to bottom,
		#7f7f7f,
		#7f7f7f 14.29%,
		#c3c3c3 14.29%,
		#c3c3c3 28.57%,
		#f3adc9 28.57%,
		#f3adc9 42.86%,
		#fff 42.86%,
		#fff 57.14%,
		#f3adc9 57.14%,
		#f3adc9 71.43%,
		#c3c3c3 71.43%,
		#c3c3c3 85.71%,
		#7f7f7f 85.71%,
		#7f7f7f
		);
}

#7f7f7f

#c3c3c3

#f3adc9

#fff

Demiboy Pride Flag

The Demiboy Pride flag was created by Tumblr user transrants in 2014 represents Non-Binary people who identify partially but not fully as a man.


#demiboy {
	background: linear-gradient(
		to bottom,
		#7f7f7f,
		#7f7f7f 14.29%,
		#c3c3c3 14.29%,
		#c3c3c3 28.57%,
		#9ad9ea 28.57%,
		#9ad9ea 42.86%,
		#fff 42.86%,
		#fff 57.14%,
		#9ad9ea 57.14%,
		#9ad9ea 71.43%,
		#c3c3c3 71.43%,
		#c3c3c3 85.71%,
		#7f7f7f 85.71%,
		#7f7f7f
		);
}

#7f7f7f

#c3c3c3

#9ad9ea

#fff

Leather Pride Flag

Tony DeBlase created the Leather Pride flag for the 1989 International Mister Leather, to celebrate the gay leather and BDSM communities.


#leather {
	background: linear-gradient(
		to bottom,
		#000,
		#000 11.1%,
		#18186c 11.1%,
		#18186c 22.2%,
		#000 22.2%,
		#000 33.3%,
		#18186c 33.3%,
		#18186c 44.4%,
		#fff 44.4%,
		#fff 55.5%,
		#18186c 55.5%,
		#18186c 66.6%,
		#000 66.6%,
		#000 77.7%,
		#18186c 77.7%,
		#18186c 88.8%,
		#000 88.8%,
		#000
		);
}
#leather:before,
#leather:after {
	position: absolute;
	content: "";
	left: 70px;
	top: 15px;
	width: 40px;
	height: 60px;
	background: #e8003a;
	border-radius: 50px 50px 0 0;
	transform: rotate(-80deg);
	transform-origin: 0 100%;
}
#leather:after {
	left: 30px;
	transform: rotate(10deg);
	transform-origin: 100% 100%;
}

#000

#18186c

#fff

#e8003a

Pup Pride Flag

While the original Pup Pride flag was designed by Kirk “Brue” Pierce, the more commonly seen flag was designed by Pup Flip Gray with input from the community in 2011.


#pup {
	background: linear-gradient(
		30deg,
		#000,
		#000 10%,
		#18186c 10%,
		#18186c 20%,
		#000 20%,
		#000 30%,
		#18186c 30%,
		#18186c 40%,
		#fff 40%,
		#fff 60%,
		#18186c 60%,
		#18186c 70%,
		#000 70%,
		#000 80%,
		#18186c 80%,
		#18186c 90%,
		#000 90%,
		#000
		);
}
#pup:before {
	content: "";
	position: absolute;
	top: 62px;
	bottom: 62px;
	left: 80px;
	right: 80px;
	background:
		radial-gradient(farthest-side,#eb3323 95%,transparent 100%) top    left,
		radial-gradient(farthest-side,#eb3323 95%,transparent 100%) top    right,
		radial-gradient(farthest-side,#eb3323 95%,transparent 100%) bottom left,
		radial-gradient(farthest-side,#eb3323 95%,transparent 100%) bottom right;
	background-size: 40px 30px;
	background-repeat: no-repeat
}
#pup:after {
	content: "";
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 60px);
	height: 40px;
	width: 120px;
	background: #eb3323;
}

#000

#18186c

#fff

#eb3323

Bear Brotherhood Flag

Designed by Craig Byrnes in 1995, the flag is meant to celebrate the bear subculture while representing colors of the fur of actual bears.


#bear-brotherhood {
	background: linear-gradient(
		to bottom,
		#4e2f10,
		#4e2f10 14.29%,
		#d5520a 14.29%,
		#d5520a 28.57%,
		#f4d044 28.57%,
		#f4d044 42.86%,
		#dac391 42.86%,
		#dac391 57.14%,
		#fff 57.14%,
		#fff 71.43%,
		#565656 71.43%,
		#565656 85.71%,
		#000 85.71%,
		#000
		);
}
#bear-brotherhood:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 20px;
	width :100px;
	height :90px;
	background-repeat : no-repeat;
	background-image : url(data:image/png;base64,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);
}

#4e2f10

#d5520a

#f4d044

#dac391

#fff

#565656

#000

Rubber Pride Flag

Designed in 1994 by Peter Tolos and Scott Moats, the Rubber Pride flag celebrates the kink of rubber and latex.


#rubber {
	background: linear-gradient(to bottom,
		#000000 18.5%, #c6101f 18.5%,
		#c6101f 22.94%, #f3d900 22.94%,
		#f3d900 37.592%, #c6101f 37.592%,
		#c6101f 42.032%, #000000 42.032%,
		#000000 56.684%, #c6101f 56.684%,
		#c6101f 61.124%, #000000 61.124%
	);
}

#rubber::before {
	content: '';
	display: block;
	position: absolute;
	top: 18%;
	left: 23%;
	width: 45.3%;
	height: 82%;
	background: linear-gradient(55deg,
		#000000 35.8%, #c6101f 35.8%,
		#c6101f 39.894%, #000000 39.894%,
		#000000 53.404%, #c6101f 53.404%,
		#c6101f 57.498%, #f3d900 57.498%,
		#f3d900 71.008%, #c6101f 71.008%,
		#c6101f 75.102%, #000000 75.102%
	);
	clip-path: polygon(57% 0%, 100% 0%, 73% 100%, 0% 100%);
}

#rubber::after {
	content: '';
	display: block;
	position: absolute;
	top: 18%;
	left: 56.069%;
	width: 43.931%;
	height: 82%;
	background: linear-gradient(-27deg,
		#000000 25.5%, #c6101f 25.5%,
		#c6101f 29.7%, #000000 29.7%,
		#000000 43.56%, #c6101f 43.56%,
		#c6101f 47.76%, #f3d900 47.76%,
		#f3d900 61.62%, #c6101f 61.62%,
		#c6101f 65.82%, #000000 65.82%
	);
	clip-path: polygon(27.7% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#000

#c6101f

#f4d044