CSS gradients are smooth transitions between two or more colors – one color that fades into another. And CSS is a great tool to help you control how that color transition happens – how many colors you want to be included, where exactly will the transition happen, will it be super smooth, will it be linear, go down, up, or diagonal, will it be radial, what angle will the color change take, or will the transition repeat. Yes, of course, you can do all that with an actual image file with a help of Photoshop or whatever program you use, but applying gradients through CSS declarations gives you much better control.
This tutorial will cover only linear gradients, but if you want to learn more about radial gradients, you should take a look at this tutorial. Let’s start.
How do I create linear gradients?
If you want to create a gradient, you must include at least two color stops – where the specified color is “pure” – the basic syntax is the following:
background-image: linear-gradient(direction the transition takes, color-stop1, color-stop2, ...);The example below is super simple and it takes the default direction of a linear gradient, which is from top to bottom, but you can control the direction of transition, the starting point of a color change, or an angle of transition however you want.
.my-gradient {
background-image: linear-gradient(aquamarine, whitesmoke);
}How to include more than two colors in a linear gradient?
.my-gradient {
background-image: linear-gradient(aquamarine, whitesmoke, gray);
}The example above is again super simple and it takes the default direction of a linear gradient, which is from top to bottom, starts with pure aquamarine at 0%, which is at the very top, reaches whitesmoke in the very middle of the background, and changes to a solid gray at the very bottom.
Use keywords to control the direction of a linear gradient
If you want to control the direction, include the keyword “direction the transition takes”. Let’s say a linear gradient starts aquamarine from the left and changes to whitesmoke on the right side, simply use the keyword “to right”:
.my-gradient {
background-image: linear-gradient(to right, aquamarine, whitesmoke);
}Replace “to right” with “to top” and solid color aquamarine will be positioned at the very bottom and solid whitesmoke at the very top of the background. Between them, a smooth transition will happen.
You can also create diagonal transitions by using keywords such as to top right – so at the left bottom corner, we will have aquamarine background changing to whitesmoke in the top right corner, as simple as that.
.my-gradient {
background-image: linear-gradient(to top right, aquamarine, whitesmoke);
}Use angles to have even more control over the direction of the gradient
Instead of using “direction keywords”, you can use angles, and you can express them with degrees. Imagine a circle – it has 360 degrees – we will apply that logic and express “direction keywords” with angles:
- 0deg = to top
- 90deg = to right
- 180deg = to bottom
- 270deg = to left
Obviously, we can use whatever angle between 0 and 359 (0 degrees = 360 degrees) we want – that’s the point of using degrees. The syntax is very similar to the basic one:
.my-gradient {
background-image: linear-gradient(225deg, aquamarine, whitesmoke);
}
The example above will take the exact “to bottom left” direction.
You can also include transparency in gradients
As you probably already know, if we want to achieve transparency, we have to use rgba color values – these are just an extension of RGB color values with “a” that represents an alpha channel, which is the one that specifies the opacity for a color. “a” ranges from 0 to 1, where 0 means total transparency, and 1 stands for a color that is fully opaque, so no transparency at all. So, basically, we can include in a gradient a color that is transparent and one that is not, just use the rgba() function to define the color stops, as simple as that.
What if I want to control where I want a particular color to start?
Easy peasy. We are talking about “color-stops” here – where the color is “pure”. Let’s say you want aquamarine only a little bit at the beginning of the background and whitesmoke to take up the majority of the space. This means you should position the whitesmoke color-stop very early, let’s say at 5%:
.my-gradient {
background-image: linear-gradient(to right, aquamarine, whitesmoke 5%);
}The percentages are color stops that declare where colors start. Values of 0% and 100% are automatically assigned to the first and last colors, this is why the first and last color stops do not require percentage and don’t specify a location. In our case, aquamarine has 0% – if the percentage of the first color-stop is not defined, it is 0% and if the last color-stop is not defined – it is 100%). Whitesmoke has 5% declared, which means that the whitesmoke color-stop will be pure at 5% of the distance from 0% (from the left side because we are creating a gradient from left to the right). The colors between 0% and 5% are some combination of aquamarine and whitesmoke.
Let’s add one more color to the mix and see what’s going on here:
.my-gradient {
background-image: linear-gradient(to right, aquamarine, whitesmoke 5%, gray 130%);
}Basically, the beginning of the mix is the same – we start with aquamarine at 0% are reach whitesmoke at 5% background width, but the whitesmoke quickly starts changing to gray – between 5% and 130% we have a combination of whitesmoke and gray. However pure gray is not visible because it is placed outside the visible area of the background at 130% at the right.
If you would like to have whitesmoke a bit more space in the gradient, you can declare one more whitesmoke color-stop between 5% and 130% – wherever you want the color to be distributed.
How can I create columns with an instant color transition?
You have to declare two color stops with the same percentage and the transition between colors will be instant – one solid color will instantly change to another solid color. This can be useful for declaring a full-height background that simulates columns. The code below will produce columns (no gradient) – because the % is the same for both color-stops. At 10% of the width of a background – aquamarine will instantly change to whitesmoke.
.my-gradient {
background-image: linear-gradient(to right, aquamarine 10%, whitesmoke 10%);
}How to create a repeating linear gradient?
First of all, you can repeat a linear gradient under a specific angle, just use degrees (as specified above) or “direction keyword”.
Second, if you want your background gradient to repeat you have to specify the percentages. The smaller the percentages, the more time the pattern will repeat:
.my-gradient {
background-image: repeating-linear-gradient(to right, aquamarine 0%, whitesmoke 7%, gray 30%);
}In the code above we will start with pure aquamarine at 0% of the width – at the very left of the background, we will achieve pure whitesmoke at 7% of the width, and pure gray at 30% width of the background. Afterward, that same pattern will repeat. The smaller the numbers of percentages, the more time the pattern will repeat.
How can I change how the gradient will move from one color to another?
That is called a color-hint – it declares how the gradient will move from one color to another. The length, which can be expressed either in percentages or length units, defines at which point between two color stops the gradient color should reach the midpoint of the color transition. The default midpoint of the color transition is the midpoint between two color stops (it’s 50%). In our example, the .my-gradient transitions evenly from one color to the next.
.my-gradient {
background: linear-gradient(aquamarine, whitesmoke);
}However, you can change that – in the example showing .my-gradient-with-color-hint we tweaked color hits and changed the gradient transition to 10%:
.my-gradient-with-color-hint {
background: linear-gradient(aquamarine, 10%, whitesmoke);
}