Responsive Disability Pride Flag CSS Background

Happy Disability Pride Month! To celebrate the occasion, I did a small project: a responsive Disability Pride flag CSS background! For those who do not know, this Disability Pride flag was created by Ann Magill and released in 2021.

My Disability Pride flag CSS background is done with a combination of the CSS background property and linuear-gradient() function, and designed to be responsive, so it can adapt to different screen sizes and devices.

Here is the CSS snippet for a responsive Disability Pride Flag background:

.disability-pride-flag {
    background:
        linear-gradient(
            37deg,
            #595959 0 35%,
            #CF7280 30% 41%,
            #EEDE77 30% 47%,
            #E8E8E8 30% 53%,
            #7bc2e0 30% 59%,
            #3BB07D 30% 65%,
            #595959 0
        );
}

After copying the above snippet in a CSS stylesheet or the HTML <style> tags, to apply the background to an HTML element, simply add the CSS class name disability-pride-flag (you can rename the class name if you want) to the HTML element's class attribute.

Note that you want to apply the Pride flag to an empty element, you also need to set the element's height or aspect-ratio property to make the Pride flag background visible. For example, the demo above sets the height property to 23rem.

I was inspired to code a Disbility Pride flag background in CSS by other people's CSS code snippets of LGBTQ+ pride flag backgrounds, such as Alvaro Montoro's LGBTQ+ Flags Coded in CSS demo.

Since Ann Magill released the Disability Pride flag to the public domain under CC0 1.0 Universal, I am doing the same to my responsive Disability Pride Flag CSS background. Therefore, you are free to use my code and do what you want with it without asking for permission or crediting me.

You can also check out my CodePen demo for my responsive Disability Pride flag CSS background and play with the code.

See the Pen Disability Pride Flag CSS Background by Helen Chong (@helenclx) on CodePen.

Update, 15 December 2024: Previously, I coded the Disability Pride flag background in CSS by using an inline SVG, but I eventually figured out how to create the stripes by using the CSS linuear-gradient() function, making my code snippet much cleaner.