Responsive Disability Pride flag CSS Background

There have been CSS code snippets of LGBTQ+ pride flag backgrounds out there, such as Alvaro Montoro's LGBTQ+ Flags Coded in CSS demo, but I could not find one for the Disability Pride flag, which was created by Ann Magill and released in 2021.

Therefore, at the start of Disability Pride Month in July 2024, I decided to code a Disability Pride flag background in CSS, and now I am releasing my code snippet for public use.

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.

I have used JavaScript to set up the header of the main part of this website, so it will display the Disability Pride flag as its background during July.

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.

CSS:

.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.