Pride flag stripes

Back to list

You can exploit CSS gradients to make color blocks with hard edges. If you set the start of one color to be exactly the same as the stop of the color preceding it, it'll give you a clear delineation between colors instead of a smooth transition. This means you can make striped tiling backgrounds without opening an image editor!

This trick can be used with whatever colors you want, but here I have some predefined pride flag combinations because it's Pride Month at the time of writing this! I used them for the backgrounds of my pride flag layouts, so you can pop over there if you'd like to see a demo.

Code

Everything, including the stripe pattern itself, is defined as a varible. Use background: var(--stripes); wherever you want to use the pattern as a background image. You can also tweak individual colors as needed.

8-stripe flag

Here's a version where the stripes are interspersed by a color of your choice:

:root {
    --background:#3a3d43; /* Change this if you want */
    --pink:#c45b85;
    --red:#c54c4c;
    --orange:#d17c48;
    --yellow:#c6be53;
    --green: #6a9d30;
    --teal: #3fb292;
    --blue: #366db1;
    --purple: #7832b9;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--pink),
        var(--pink) 20px,
        var(--background) 20px,
        var(--background) 40px,
        var(--red) 40px,
        var(--red) 60px,
        var(--background) 60px,
        var(--background) 80px,
        var(--orange) 80px,
        var(--orange) 100px,
        var(--background) 100px,
        var(--background) 120px,
        var(--yellow) 120px,
        var(--yellow) 140px,
        var(--background) 140px,
        var(--background) 160px,
        var(--green) 160px,
        var(--green) 180px,
        var(--background) 180px,
        var(--background) 200px,
        var(--teal) 200px,
        var(--teal) 220px,
        var(--background) 220px,
        var(--background) 240px,
        var(--blue) 240px,
        var(--blue) 260px,
        var(--background) 260px,
        var(--background) 280px,
        var(--purple) 280px,
        var(--purple) 300px,
        var(--background) 300px,
        var(--background) 320px);
}

And then another version where it's just the rainbow:

:root {
    --pink:#c45b85;
    --red:#c54c4c;
    --orange:#d17c48;
    --yellow:#c6be53;
    --green: #6a9d30;
    --teal: #3fb292;
    --blue: #366db1;
    --purple: #7832b9;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--pink),
        var(--pink) 20px,
        var(--red) 20px,
        var(--red) 40px,
        var(--orange) 40px,
        var(--orange) 60px,
        var(--yellow) 60px,
        var(--yellow) 80px,
        var(--green) 80px,
        var(--green) 100px,
        var(--teal) 100px,
        var(--teal) 120px,
        var(--blue) 120px,
        var(--blue) 140px,
        var(--purple) 140px,
        var(--purple) 160px);
}

Lesbian flag

:root {
    --red:#b3464b;
    --orange:#c47748;
    --white:#f3e5db;
    --pink:#ca7079;
    --maroon:#8e3458;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--red),
        var(--red) 20px,
        var(--orange) 20px,
        var(--orange) 40px,
        var(--white) 40px,
        var(--white) 60px,
        var(--pink) 60px,
        var(--pink) 80px,
        var(--maroon) 80px,
        var(--maroon) 100px);
}

Bisexual flag

:root {
    --pink:#a91b73;
    --purple:#681c81;
    --blue:#11176f;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--pink),
        var(--pink) 20px,
        var(--purple) 20px,
        var(--purple) 40px,
        var(--blue) 40px,
        var(--blue) 60px);
}

Asexual flag

:root {
    --black:#45384e;
    --white:#d1c2d1;
    --purple:#6e3c7e;
    --grey:#928498;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--black),
        var(--black) 20px,
        var(--grey) 20px,
        var(--grey) 40px,
        var(--white) 40px,
        var(--white) 60px,
        var(--purple) 60px,
        var(--purple) 80px);
}

Trans flag

:root {
    --lightpink:#f1bdd3;
    --lightblue: #addcf5;
    --white: #f0f0f0;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--lightblue),
        var(--lightblue) 20px,
        var(--lightpink) 20px,
        var(--lightpink) 40px,
        var(--white) 40px,
        var(--white) 60px,
        var(--lightpink) 60px,
        var(--lightpink) 80px);
}

Nonbinary flag

:root {
    --yellow:#c3b54d;
    --purple:#9a5dae;
    --black:#463453;
    --white:#dbd1dd;

    --stripes: repeating-linear-gradient(
        90deg,
        var(--yellow),
        var(--yellow) 20px,
        var(--white) 20px,
        var(--white) 40px,
        var(--purple) 40px,
        var(--purple) 60px,
        var(--black) 60px,
        var(--black) 80px);
}