adding some pride to your stylesheets


I love pride and I like CSS and eventually I figured out you could draw pride flags with CSS gradients using a little bit of math I drew a lot. Being able to show my pride on my projects with just a little CSS is just 😍.

If you'd like to add one feel free to open a PR on GitHub.


Gay Pride

Bisexual Pride

Transgender Pride

Non-binary Pride

Asexual Pride

Pansexual Pride

Queer Pride

Gay Male Pride

Lesbian Pride

Intersex Pride

Genderfluid Pride

Agender Pride

Polyamorous Pride

Omnisexual Pride

Polysexual Pride

Aromantic Asexual Pride

Genderqueer Pride


Install it from npm

yarn add lgbtq.css

Add it in your CSS:

@import "~lgbtq.css";

Then use the class that represents the pride flag you want to use. Applying the class to an element will change it's background.

Class Names

Class NameFlag
Gay Gay Pride
BiPlus Bisexual Pride
Trans Transgender Pride
NonBinary Non-binary Pride
Asexual Asexual Pride
Pansexual Pansexual Pride
Queer Queer Pride
GayMale Gay Male Pride
Lesbian Lesbian Pride
Intersex Intersex Pride
GenderFluid Genderfluid Pride
Agender Agender Pride
Polyamorous Polyamorous Pride
Omnisexual Omnisexual Pride
Polysexual Polysexual Pride
AroAce Aromantic Asexual Pride
Genderqueer Genderqueer Pride