Pride flag Gradients

Introduction

If you look to the top of this website, you can see a beautiful banner. Not only is it transitioning (hehe) between the lesbian and the trans pride flag! It also is perfectly responsive!

Try it! Just change the width of the browser window you are reading this tutorial in! Or view it on a phone!

In this article, I will explain to you how make one of these for yourself! With any flag you want, too!

Set up

To make this more clean and reusable, create a new HTML file called color.html. Place it in an appropriate project folder and add the minimum HTML structure. Now either create a new CSS file or link an existing one in the head.

If you don't know how to do this, simply read my tutorial: Basics of making a website.

Next place two div container inside your body Element, like this:

That's all for now on the HTML side. Now let's go to our CSS file!

Linear Gradients

We are gonna start by making the first strip of the transition. For that we will need linear-gradient! And the first two colors: rgb(173,37,0) and rgb(74,168,204)!

.pride-flag-linear-gradient { width: 100%;/* we need to give the Element some proportions, or nothing will show up */ height: 100%;/* we need to give the Element some proportions, or nothing will show up */ background-image: linear-gradient(to left, rgb(173,37,0), rgb(74,168,204); background-size: 100% 50%;/* How much space will the background take up: first value horizontal, second value vertical */ background-position: 0 0;/* Where is the background image anchored */ background-repeat: no-repeat;/* Only show the image once, otherwise it will be, well, repeated over the full space! */ }

Now we also need to give to outer container some contraints! Since we are using percentage values for our inner div, we can completly control how big our gradient is with the outer container. I am also giving it a temporary border. That way it is easier to see how we have manipulated the inner one so far.

.flag-container { width: 100%; height: 100%; border: 1px solid black; }

Now we already have the first stripe of our flag gradient. And currently it takes up half the size of the outer container. This is a very good time for you, dear reader to play around with values a bit and see what changes!

Don't worry nobody will be tortured with a sentence like 'the rest is left as an exercise for the reader'! ;)

Multiple Gradients in a single background image

So we have the first stripe, but how do we get the rest in the single background? Let me show you!

.pride-flag-linear-gradient { width: 100%; height: 100%; background-image: linear-gradient(to left, rgb(173,37,0), rgb(74,168,204)), linear-gradient(to left, rgb(208,126,71), rgb(200,138,150)); background-size: 100% 50%, 100% 50%; background-position: 0 0, 0 100%;/* Where is the background image anchored */ background-repeat: no-repeat;/* Only show the image once, otherwise it will be, well, repeated over the full space! */ }

So now specified that we use two images (which are our linear gradients) as background. We also told our css that these images have same size. The first one is placed at the top and the second one is placed at the bottom. Both at the start of our container.

Now, let's finish this whole thing! Spoiler: there will likely be a bit of trial an error involved!

.pride-flag-linear-gradient { width: 100%; height: 100%; background-image: linear-gradient(to left, rgb(173,37,0), rgb(74,168,204)), linear-gradient(to left, rgb(208,126,71), rgb(200,138,150)), linear-gradient(to left, white, white), linear-gradient(to left, rgb(172,79,134), rgb(200, 138, 150)), linear-gradient(to left, rgb(133,2,79), rgb(74, 168, 204)); background-size: 100% 20%, 100% 20%, 100% 20%, 100% 20%, 100% 20%; background-position: 0 0, 0 25%, 50% ,0 75%,0 100%;/* Where is the background image anchored */ background-repeat: no-repeat;/* Only show the image once, otherwise it will be, well, repeated over the full space! */ }

And I absolutly had to guess here: Position values with percentage values seem to work slightly different then pixel values! The very first value is at 0% and the very last is at 100%. Form there I intuited (and tried it) that the middle one would be 50%. In other words the logic for n linear_gradients in a single background would be.
Vertical position of the m-ths stripe is: (m - 1) * (100% / (n-1)).

(Remember: Trial and Error is your friend with these kind of things!)

We're done!

And with that we have made our gradient between two pride flags! That should give you all the tools to make your own kinda flag transition!

Bonus

What you could now do is: put this HTML as local source for a obs browser source! Also you could change the direction by replacing 'to left' with another direction. (to right, to top, to bottom, etc.)

If you were to replace rgb with rgba you could specify the transparency in the fourth argument! There are lots of things with which you could customise this.

See you next time!