Queer CSS Flags

In celebration of Pride Month 2023, I decided to take my hand at making various Pride flags in CSS! I'll likely add onto this as time goes on.

CSS Sexuality Flags

Aromantic

CSS Code

flag {background: linear-gradient(180deg, rgba(61,165,66,1) 0%, rgba(61,165,66,1) 20%, rgba(167,211,121,1) 20%, rgba(167,211,121,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(169,169,169,1) 60%, rgba(169,169,169,1) 80%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);}

Aroace

CSS Code

flag {background: linear-gradient(180deg, rgba(227,141,0,1) 0%, rgba(227,141,0,1) 20%, rgba(237,206,0,1) 20%, rgba(237,206,0,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(98,176,221,1) 60%, rgba(98,176,221,1) 80%, rgba(26,53,85,1) 80%, rgba(26,53,85,1) 100%);}

Asexual

CSS Code

flag {background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(163,163,163,1) 25%, rgba(163,163,163,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(128,0,128,1) 75%, rgba(128,0,128,1) 100%);}

Bisexual

CSS Code

flag {background: linear-gradient(180deg, rgba(215,0,113,1) 0%, rgba(215,0,113,1) 40%, rgba(156,78,151,1) 40%, rgba(156,78,151,1) 50%, rgba(156,78,151,1) 60%, rgba(0,53,169,1) 60%, rgba(0,53,169,1) 100%);}

Demiromantic

CSS Code

flag {background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(58,167,64,1) 42%, rgba(58,167,64,1) 58%, rgba(211,211,211,1) 58%, rgba(211,211,211,1) 100%);}
flag:before {
  content: "";
  display: block;
  background-color: black;
  height: 100%;
  width: 80px; /*Change this depending on the size of your flag!*/
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);

Demisexual

CSS Code

flag {background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(110,0,113,1) 42%, rgba(110,0,113,1) 58%, rgba(211,211,211,1) 58%, rgba(211,211,211,1) 100%);}
flag:before {
  content: "";
  display: block;
  background-color: black;
  height: 100%;
  width: 80px; /*Change this depending on the size of your flag!*/
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);

Gay / MLM

CSS Code

flag {background: linear-gradient(180deg, rgba(1,142,113,1) 0%, rgba(1,142,113,1) 14%, rgba(33,207,171,1) 14%, rgba(33,207,171,1) 28%, rgba(153,233,194,1) 28%, rgba(153,233,194,1) 42%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(124,175,227,1) 58%, rgba(124,175,227,1) 72%, rgba(79,71,205,1) 72%, rgba(79,71,205,1) 86%, rgba(59,19,121,1) 86%, rgba(59,19,121,1) 100%);}

Graysexual

CSS Code

flag {background: linear-gradient(180deg, rgba(213,40,0,1) 0%, rgba(213,40,0,1) 20%, rgba(253,153,84,1) 20%, rgba(253,153,84,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(210,97,163,1) 60%, rgba(210,97,163,1) 80%, rgba(163,0,97,1) 80%, rgba(163,0,97,1) 100%);}

Grayromantic

CSS Code

flag {background: linear-gradient(180deg, rgba(2,126,14,1) 0%, rgba(2,126,14,1) 20%, rgba(178,178,178,1) 20%, rgba(178,178,178,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(178,178,178,1) 60%, rgba(178,178,178,1) 80%, rgba(2,126,14,1) 80%, rgba(2,126,14,1) 100%);}

Lesbian

CSS Code

flag {background: linear-gradient(180deg, rgba(213,40,0,1) 0%, rgba(213,40,0,1) 20%, rgba(253,153,84,1) 20%, rgba(253,153,84,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(210,97,163,1) 60%, rgba(210,97,163,1) 80%, rgba(163,0,97,1) 80%, rgba(163,0,97,1) 100%);}

Pansexual

CSS Code

flag {background: linear-gradient(180deg, rgba(255,27,141,1) 0%, rgba(255,27,141,1) 33%, rgba(255,217,0,1) 33%, rgba(255,217,0,1) 67%, rgba(27,179,255,1) 67%, rgba(27,179,255,1) 100%);}

CSS Gender Flags

Agender

CSS Code

flag {background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 14%, rgba(185,185,185,1) 14%, rgba(185,185,185,1) 28%, rgba(255,255,255,1) 28%, rgba(255,255,255,1) 42%, rgba(184,244,131,1) 42%, rgba(184,244,131,1) 58%, rgba(255,255,255,1) 58%, rgba(255,255,255,1) 72%, rgba(185,185,185,1) 72%, rgba(185,185,185,1) 86%, rgba(0,0,0,1) 86%, rgba(0,0,0,1) 100%);}

Bigender

CSS Code

flag {background: linear-gradient(180deg, rgba(197,122,163,1) 0%, rgba(197,122,163,1) 14%, rgba(238,167,206,1) 14%, rgba(238,167,206,1) 28%, rgba(214,200,233,1) 28%, rgba(214,200,233,1) 42%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(214,200,233,1) 58%, rgba(214,200,233,1) 72%, rgba(155,200,233,1) 72%, rgba(155,200,233,1) 86%, rgba(109,131,210,1) 86%, rgba(109,131,210,1) 100%);}

Demiboy

CSS Code

flag {background: linear-gradient(180deg, rgba(128,128,128,1) 0%, rgba(128,128,128,1) 14%, rgba(197,197,197,1) 14%, rgba(197,197,197,1) 28%, rgba(155,218,236,1) 28%, rgba(155,218,236,1) 42%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(155,218,236,1) 58%, rgba(155,218,236,1) 72%, rgba(197,197,197,1) 72%, rgba(197,197,197,1) 86%, rgba(128,128,128,1) 86%, rgba(128,128,128,1) 100%);}

Demigirl

CSS Code

flag {background: linear-gradient(180deg, rgba(128,128,128,1) 0%, rgba(128,128,128,1) 14%, rgba(197,197,197,1) 14%, rgba(197,197,197,1) 28%, rgba(255,174,201,1) 28%, rgba(255,174,201,1) 42%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(255,174,201,1) 58%, rgba(255,174,201,1) 72%, rgba(197,197,197,1) 72%, rgba(197,197,197,1) 86%, rgba(128,128,128,1) 86%, rgba(128,128,128,1) 100%);}

Genderfluid

CSS Code

flag {background: linear-gradient(180deg, rgba(255,118,163,1) 0%, rgba(255,118,163,1) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 40%, rgba(191,17,215,1) 40%, rgba(191,17,215,1) 60%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 80%, rgba(48,60,190,1) 80%, rgba(48,60,190,1) 100%);}

Genderqueer

CSS Code

flag {background: linear-gradient(180deg, rgba(182,127,221,1) 0%, rgba(182,127,221,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 67%, rgba(73,130,30,1) 67%, rgba(73,130,30,1) 100%);}

Nonbinary

CSS Code

flag {background: linear-gradient(180deg, rgba(255,244,48,1) 0%, rgba(255,244,48,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(156,89,209,1) 50%, rgba(156,89,209,1) 75%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%);}

Transfeminine

CSS Code

flag {background: linear-gradient(180deg, rgba(115,222,255,1) 0%, rgba(115,222,255,1) 14%, rgba(255,225,237,1) 14%, rgba(255,225,237,1) 28%, rgba(255,181,214,1) 28%, rgba(255,181,214,1) 42%, rgba(254,140,191,1) 42%, rgba(254,140,191,1) 58%, rgba(255,181,214,1) 58%, rgba(255,181,214,1) 72%, rgba(255,225,237,1) 72%, rgba(255,225,237,1) 86%, rgba(115,222,255,1) 86%, rgba(115,222,255,1) 100%);}

Transgender

CSS Code

flag {background: linear-gradient(180deg, rgba(91,206,250,1) 0%, rgba(91,206,250,1) 20%, rgba(245,169,184,1) 20%, rgba(245,169,184,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(245,169,184,1) 60%, rgba(245,169,184,1) 80%, rgba(91,206,250,1) 80%, rgba(91,206,250,1) 100%);}

Transmasculine

CSS Code

flag {background: linear-gradient(180deg, rgba(255,138,189,1) 0%, rgba(255,138,189,1) 14%, rgba(205,245,254,1) 14%, rgba(205,245,254,1) 28%, rgba(154,235,255,1) 28%, rgba(154,235,255,1) 42%, rgba(116,223,255,1) 42%, rgba(116,223,255,1) 58%, rgba(154,235,255,1) 58%, rgba(154,235,255,1) 72%, rgba(205,245,254,1) 72%, rgba(205,245,254,1) 86%, rgba(255,138,189,1) 86%, rgba(255,138,189,1) 100%);}

Xenogender

CSS Code

flag {background: linear-gradient(180deg, rgba(255,102,146,1) 0%, rgba(255,102,146,1) 14%, rgba(255,154,152,1) 14%, rgba(255,154,152,1) 28%, rgba(255,184,131,1) 28%, rgba(255,184,131,1) 42%, rgba(251,255,167,1) 42%, rgba(251,255,167,1) 58%, rgba(133,188,255,1) 58%, rgba(133,188,255,1) 72%, rgba(157,133,255,1) 72%, rgba(157,133,255,1) 86%, rgba(165,16,255,1) 86%, rgba(165,16,255,1) 100%);}
flag:before {
content: "";
  position: relative;
  top: 25%;
  display: block;
  height: 50%;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 102 51'%3E%3Cpath d='M51.575 5.61c-25.488-.188-47.8 15.518-47.733 41.572h93.437C97.354 21.92 74.82 5.782 51.575 5.61zm.136 2.787c20.147.548 41.229 14.091 42.031 35.517a6.56 6.56 0 0 1-1.855-.003c-2.257-24.705-27.539-32.85-40.173-32.88-11.224-.027-38.505 4.557-42.72 32.921-.661-.004-1.237-.013-2.019-.017C8.547 19.942 32.537 7.88 51.711 8.397zm-.01 5.167c12.761-.037 35.612 8.738 37.206 30.348-.678.044-1.076.05-1.61.007-3.429-20.097-22.49-27.937-35.604-27.879-15.95.07-33.628 8.458-37.76 27.926-.773-.028-1.536-.005-2.264.009 4.636-23.679 25.357-30.37 40.032-30.411zm30.521 30.382c-3.038-17.551-19.905-23.815-30.54-23.816-9.727-.002-26.996 5.904-31.666 23.803-1.112-.055-2.095.024-2.85.024C19.372 26.18 41.503 18.21 51.659 18.206c11.124-.005 30.959 8.294 32.65 25.74-.986-.003-1.343.002-2.087 0zm-3.117.03c-18.228.014-37.78.073-56.206-.03 4.68-15.338 18.708-21.444 28.848-21.458 11.087-.014 25.242 6.839 27.358 21.489z' style='fill:%23000'/%3E%3Cpath d='m148.139 67.263-5.119-5.066-7.075 1.344 3.236-6.434-3.465-6.313 7.12 1.09 4.934-5.247 1.163 7.108 6.514 3.071-6.4 3.303-.908 7.144z' style='opacity:1;fill:%23000;fill-opacity:1;fill-rule:nonzero;stroke:%23000;stroke-width:.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' transform='rotate(18.804 161.13 -226.474) scale(.97163)'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);}

About

CSS Sexuality Flags

Aromantic

Aroace

Asexual

Bisexual

Demiromantic

Demisexual

Gay / MLM

Graysexual

Grayromantic

Lesbian

Pansexual

CSS Gender Flags

Agender

Bigender

Demiboy

Demigirl

Genderfluid

Genderqueer

Nonbinary

Transfeminine

Transgender

Transmasculine

Xenogender