You could be here for a lot of reasons. Maybe you took a wrong turn and got lost in the interwebs, or maybe you thought “gradient” meant something completely different. Most of you, though, are here for one reason: to learn more about the CSS linear gradient and how you can code one yourself.
You see linear gradients in brand design everywhere you turn—in logos, web design, and everything in between. While gradients may come in many shapes, shades, and sizes, you’ll primarily see them in two types: the linear gradient and the radial gradient. The CSS linear gradient, in particular, has become extremely popular and can be seen all over the digital branding of companies like Stripe and Instagram.
So that brings us to why you’re here now: to learn how to code a CSS linear gradient. For those of you who have been perplexed by the wondrous linear gradient, welcome to the only one-stop reference guide you’ll need to get started.
Ready? Let’s begin.
First things first. Why should you even care?
But first—before you can even think about covering the basics of the linear gradient, you should figure out why you care. Because knowing why you’re doing something is important to, you know, psychology and stuff.
As the designer you are (in some capacity, at least—since you’re here in the first place), it’s your job to keep up with trends. Gradients, in general, have been a trend for a while. Considering that various sources have been discussing the “comeback” of CSS gradients for years now, it’s pretty clear that this “trend” is here to stay.
Regardless of following trends, though, you’re a smart cookie. It’s your job to make things that are aesthetically appealing and attractive to the masses. And, well, gradients are the best way to do that. So say goodbye to flat colors and boring, 2-dimensional design!
Let’s get into it, shall we?
Breaking open the code: the CSS linear gradient.
What You'll Need
Just like any good recipe would, let's cover the things we need first.
Color-stops. In the most basic version of a CSS linear gradient code, all you'll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the gradient. More about that later, though.
Direction. Everybody needs a little direction, and gradients are no different. Although leaving this out will still allow the code to work (defaulting to a certain value), setting a direction or angle can help you control how your linear gradient is presented in the design.
Syntax. And of course, the most important part of creating a beautiful CSS linear gradient is the CSS itself. In the most simplest of breakdowns, the code is as follows:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Now that the necessities are out of the way, keep reading to learn more about the different aspects of a CSS linear gradient and how to break down that tricky code.
The Ingredients
Oh, if only it were that simple. And technically it is. Of course, if you want to truly understand the magic of the linear gradient, you should take a deeper look into the components that make up this beautiful creature. Only then will you truly be one with the power.
The box (a.k.a. The Pan). The simplest ingredient of a delicious linear gradient is the box which encompasses it. Think of the gradient like a cake. The box is the pan.
Your standard box will cover the entirety of whatever element you are placing the gradient in-be it a div, button, anything. However, you can change that by using the background-size property. If you set that property to, say, 350px * 200px, the box would take that size-and the gradient along with it.
By default, the box (at whatever size) will be positioned at the top-left corner of the containing element. You could play with this by setting the background-position property. The possibilities are endless!
The line & angle (a.k.a. The Flour). The next ingredients are where it might get tricky-like measuring out the flours and dry ingredients for your gradient cake. To be quite frank, it can be a pain in the ass to get this right. But then again, that's why you can just buy a pre-made mix to do it for you!
The line is where each of your color-stops are located and distributed along. This line may be longer than the box, and some of the color-stops may also be located outside of the box, depending on how you set them.
The angle determines how the gradient will look and be presented inside the box. Without getting into all the crazy geometry and math ridiculousness, the gradient line passes along through the center of this angle, and the angle is determined by the relationship between the center of that line and a vertical line that passes through the center of the box.
You can define the linear gradient angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to top, to left, and to right to determine where the line should move to from the starting point.
These directional keywords can be combined-like to top right or to bottom left-to create a diagonal line. You could also use number and unit pairings to determine the angle and direction of the line. Examples of these include 90deg or 2turn.
If you don't include a direction or angle, the linear gradient will automatically default to to bottom. The number and unit equivalents to this would be 180deg or 0.5turn. Because 180deg is equivalent to to bottom, 0deg would then be equivalent to to top.
The color-stops (a.k.a. The Icing).
While every individual component of a CSS linear gradient is just as important as the next, no cake would be complete without its icing. Just the same, no gradient would be a proper gradient without some colors to transition between!
These colors can be set as any type: named, HEX, RGB, or HSL. Because of this, there are a lot of different options when it comes to how your gradient can be shown. For example, if using RGB, you could add an alpha number for transparency. (Think of that like some fondant on top of the icing. It’s super cool, but probably more for people who know what they’re doing and want a little something extra on their cake.)
Although the code can work without them, positions can also be added after each color for more control over how the gradient looks and where each color blends with the next. These positions can be set in percentages or pixels, depending on which is easier for you.
A simpler way of thinking about these positions is that they tell the colors where to stop (hence the term “color-stop”). You might also think of these numbers as the length of that color. For example, if you added a 30% position to a red color-stop, that chunk of red would stop at 30% of the box and continue on to blend into the next color.
If you don’t manually set these positions, the browser will automatically determine the positioning based on how many colors are set, and those positions will be evenly spread out across the box. If you have two colors, one will be set to 0% and the second will be set to 100%. If you have three colors, the first will be at 0%, the second at 50%, and the third at 100%. Four colors would have the first at 0%, the second at 25%, the third at 50%, and the fourth at 100%. So on, so forth.
The best way for you to learn more about how positions work is to play with them yourself! Luckily, our Gradient Tool lets you do that the quick and easy way (a.k.a. without having to code). Head on over there to learn more with your own eyes.
CSS Linear Gradients Aren't So Scary
Once you break down the syntax of a CSS linear gradient, it’s actually pretty simple, and what’s more, it’s even pretty fun. By manipulating the syntax in ways we’ve discussed, you can customize and modify your gradients on your pages in any way you want!
Remember, linear gradients aren’t all that complicated. If you catch yourself getting caught up in the technicality of it, stop, close your eye and think about a sunset. Imagine the beautiful, dark blues fading into rich, powerful reds, and all of the colors that progress and fill in between to create that gradual effect. Let that sunset calm you down, refocus you, and get back to work on building your very own, custom CSS linear gradient for your site
