See how to Fulfill more of linear-gradient() Magic.

Introduction

This is what you’ll design by the end of this tutorial

You’ll be able to do it with the help of linear-gradient() and on top of that, Imma show you how to create smooth patterns and stripes to add a touch of professionalism to your design.

1. What’s the basic usage?

This is the syntax of linear-gradient(). I took it from MDN.

background: linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
What the hell is that?

Most of your future time will be spent on documentation, so I should probably make it easy for you.

  • brackets[] to make a group.
  • anything followed by ?, means it’s not required and it could be skipped.
  • | that’s OR. I’m just saying don’t get mad.

in our example we have [left | right] which means we can add the keyword left or right to linear-gradient() also we can omit them.

  • Whenever you see + know that you can have as many as you want of that property value.

Back to our example, we have [, <color-stop>]+ it means we can add as much colors-stop as we want.

Still confused? No worries, imma show you how I did the first part step by step

[ [ [ <angle> | to [top | bottom] || [left | right] ],]?

First, I looked out for the first comma , everything before it, is just one value property.

[ Value property ,]?

and that value property isn’t required, becuase it’s wrapped inside []? so we can omit it if we want to.

all we have now is 
value property

in other words

[ <angle> | to [top | bottom] || [left | right] ]

The first option here is the angle, something like 45deg or 90deg
The second option is the keyword to followed by top or bottom and what's interesting is top or bottom could also be followed by left or right. You can tell it by ||.

Okay here’s some combination I could make.

background: linear-gradient(45deg);  
background: linear-gradient(to top);
background: linear-gradient(to bottom left);
background: linear-gradient(to bottom right);
background: linear-gradient(to left);

Now you have abilities to read the second part <color-stop>[, <color-stop>]+.

Open your text editor and follow, I’ll start with div

<div class="box"></div>

in css imma add

.box {
width: 50%;
height: 6em;
background: red;
}

we’ll have something like this


liner-gradient is a function that goes with background or background-image. Let's remove that red color and replace it with this

background: linear-gradient(to right, black, white);

the results are


I could also have written the last line as follow

background: linear-gradient(90deg, black, white);
Wait, when should I use deg instead of keywords?

This is what keywords can do

to top  
to top left
to top right
to bottom  
to bottom left
to bottom right
to left  
to right

As you see they are limited, so if you need more control or you feel lazy to type, go with deg.

Things get interesting when we add percentages to any color stop

background: linear-gradient(90deg, black 10%, red);

Now it’s time to understand how color stop work.

Setting both black and red at 50%

background: linear-gradient(90deg, black 50%, red 50%);

there is no fade in or fade out, between these two colors.

let’s change black to 40%. I added a blue separator to help you understand what’s going on

background: linear-gradient(90deg, black 40%, red 50%);

black is painted from 0% to 40% 
red is painted from 50% to 100%

The blue separator is 40% from the left, Red color started at 50%, the fade happened in between that 40% 50% space. 
You get it ?

something else you need to know, this line

background: linear-gradient(90deg, black 40%, red 50%);

is equally the same as this line

background:  
linear-gradient(
90deg,
black 0%, black 40%,
red 50%, red 100%
);

Now the picture must be clear, But It gets complicated when we start adding more than two colors, for that reason imma show you how to deal with it.

You still remember when we did 50% black, 50% red


Because we have two different colors at the same position, the transition between these two is none rather than smooth.

Now I need to show you how to create the same effect in a different way, it’ll come in handy when we start using multiple colors

background: linear-gradient(90deg, black 50%, red 0);

We set the second color’s position at 0, the browser will automatically adjust its position to be equal to the previous color stop, which is 50%.

When I use multiple colors stop, I always start simple something like below

background: linear-gradient(90deg,  
#BFBDC1 20%,
#6D6A75 0, #6D6A75 40%,
#1E1C22 0, #1E1C22 60%,
#DEB841 0, #DEB841 80%,
#DE9E36 0, #DE9E36
);

color1 ends at 20% 
color 2 starts at 20% 
color3 starts at 40% 
color4 starts at 60% 
color5 starts at 80%

Then I change the smoothness between colors to my taste

background: linear-gradient(90deg,  
#BFBDC1 10%,
#6D6A75 30%,
#1E1C22 40%,
#DEB841 80%,
#DE9E36
);

I’ve removed all hard colors stop colorX 0,, they were there as guides no more :)

now we have something like this


It’s much easier to lay down your colors then fade them till you get the end result.

You can create beautiful fades with this technique

background: linear-gradient(90deg,  
#EAEAEA 4%,
#C1C1C2 30%,
#98979A 40%,
#6F6E72 80%,
#323036
);

2. How to create patterns using linear-background?

Let’s create something that we may often encounter in our daily basis. 
Tiny patterns to spice any background you want, in our example we’ll work on body {}.

background:  
repeating-linear-gradient(90deg,
#EAEAEA 0, #EAEAEA 20%,
white 0, #EAEAEA 40%,
white 0, #EAEAEA 60%
);
Wait, REPEATING? What’s that?

It works exactly like linear-background, but It repeats the pattern automatically.

So this is what I have


By now, you’re more than able to do the same. Let’s see what will happen if we make that pattern so small via background-size.

background-size: 0.2em 1em;

the end result is


Beautiful right ?

3. Take it to the next level

Wouldn't be nice if we spice it a bit with some randomness? So the user wouldn't be able to notice the repitive pattern.

I’ma choose some bright colors to make it easy for you to follow.

repeating-linear-gradient(90deg,  
black 0, black 20%,
red 0, red 40%,
white 0, #EAEAEA 60%
);

This is what we have


We need to go back to linear-gradient instead of repeating-linear-gradient, because we gonna layer them so we could add randomness to make it look less repetitive.

linear-gradient(90deg,  
black 0, black 20%,
red 0, red 40%,
white 0, #EAEAEA 60%
);

The pattern ain’t repetitive anymore, we need to create that repetition manually

background:  
linear-gradient(90deg,
black 0, black 20%,
red 0, red 40%,
white 0, #EAEAEA 60%,
red 0, red 80%,
black 0, black
);

results are now similar to our previous repeating-linear-gradient


When we type black 20%, red 0, we're saying that we want 20% of space to be black then after that we will have a new color stop which will be red. 
ignore red for now and act like you don't know what the next color could be.

I can write the previous line as

background: linear-gradient(90deg, black 20%, transparent 0);

guess what? Now I can layer the second red color stop like the following

background:  
linear-gradient(90deg, black 20%, transparent 0),
linear-gradient(90deg, red 40%, transparent 0);

And after layering all the remaining layers here’s the final result

background:  
linear-gradient(90deg, black 20%, transparent 0),
linear-gradient(90deg, red 40%, transparent 0),
linear-gradient(90deg, #EAEAEA 60%, transparent 0),
linear-gradient(90deg, red 80%, transparent 0),
linear-gradient(90deg, black 100%, transparent 0);

Back to background-size we can achieve some crazy randomness by controlling each color stop space

background-size:  
2em 100%,
1.6em 100%,
1.4em 100%,
1em 100%,
0.8em 100%;

To maximize it more, I’ma use prime numbers. This trick could also help when it comes to animation (I mean prime numbers).

background:  
linear-gradient(90deg, black 19%, transparent 0),
linear-gradient(90deg, red 41%, transparent 0),
linear-gradient(90deg, #EAEAEA 61%, transparent 0),
linear-gradient(90deg, red 83%, transparent 0),
linear-gradient(90deg, black 97%, transparent 0);
background-size: 19px 100%;
background-size:  
19px 100%,
13px 100%,
17px 100%,
7px 100%,
10px 100%;

Cool, now I can safely go to my favorite colors, As a said before I used these colors just to make it easy for you to follow :)


And you can also change deg of each layer 
for example, the first layer is 90deg, the second could be 45deg and so on ...

This is the final result


You can choose extreme light colors to make it blend very well with the white body background.

4. Let’s design a checkboard!

You might think it’s easy to make a checkboard pattern in CSS. That’s true, but it’s quite trickier than one might expect.

I’ma start with triangles

body {  
background:
linear-gradient(45deg, black 25%, transparent 0);
background-size: 1em 1em;
}

If we flip each color stop we can create triangles of the opposite direction and you know what will happen if we merge the two layers.

Hold on, Triangles! Why?

You may think creating two squares will solve the problem, but in CSS you can’t create space around them and when the layer merge will happen, all you gonna see is a solid background.

Now, if we combine the two tringle layers, this is what we gonna see

background:  
linear-gradient(45deg, black 25%, transparent 0),
linear-gradient(45deg, transparent 75%, black 0);

In order to combine them into a square, we need to nudge the second layer by half the tile size

background:  
linear-gradient(45deg, black 25%, transparent 0),
linear-gradient(45deg, transparent 75%, black 0);
background-size: 1em 1em;
background-position: 0 0, 0.5em 0.5em;

I’m going to double all layers and nudge them, then change the colors

body {  
background-color: #E7E8E8;
background-image:
linear-gradient(45deg, #D0D2D1 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #B9BBBB 0),
linear-gradient(45deg, #8B8E8E 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #A2A5A4 0);
background-size: 4em 4em;
background-position:
0 0,
2em 2em,
2em 2em,
4em 4em;
}

And finally :)


5. What’s next?

I’m hard working on creating new training video series to drastically help you become a stunning web developer.

Donate to help make these training courses FREE. Learning can’t wait.Paypal.me/Zpyro


Zpyro Youtube Channel is here, Subscribe to get notified when I launch these courses.

Please help out your friend with a heart or a share.
Say Hi, I’m on Instagram, Facebook and Twitter.