killthecake | [3] Tutorial: How to Make a Gradient (Advanced Edition? Kinda?)

Gradients are those different colors or rainbows or whatever that all blend together, like so:

And now we're going to learn how to do them. But before we get started, you should know that they won't work everywhere. Like you can't use a gradient as a font color or something. They do work in places you can make css work, though, like journal entries or layouts.

Anyway, let's go ahead and get started. There's a surprising amount to it.

However! This guide at w3schools will cover all of the basics. You'll learn about how to make them, how angles work, repeating patterns, transparency, and linear/radial shapes.

In here, we're going to cover a few other things.

Percentages

So this might be tough to explain, but I'm going to try.

When you make your gradient and you add the degrees of your slope, there's an unseen thing about the width/length of all these colors. If you want to change the width/length or where it starts/stops, then you can add percentages to the code.

The percentage will tell the color where in the coding to stop. Let's use the rainbow at the top as an example.

The original code looks like this:

background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, purple);

Let's change that so the red stops halfway through the code. We're going to add a 50% to it, like this:

background: linear-gradient(90deg, red 50%, orange, yellow, green, cyan, blue, purple);

And the result:

I originally had a bunch of other things to write, but that w3schools guide covered almost everything. I'm going to post this anyway!! And if I learn new things that the linked guide doesn't explain, I'll add them in the future.