The gradients are essential parts of the graphic design, and in today web design is more attractive than ever.

We left behind a long time ago the image method where we exported the button’s and the different parts UI’s gradients from Photoshop to use them as a background image. Now we have a function which we can quickly generate linear or radial gradient as we did in our graphic software. With these type of toolkit, we can reduce the size of our pages and get rid of some HTTP request.

The gradients are image types so you can use it with the background property. It was added in the CSS3 Image Module, so it is present from a few years ago, so today’s the browser compatibility is not a problem.

As I mentioned earlier, there are two types of gradients, the linear and the radial. In CSS these two method is quite similar – as you will see – if you know one you know the other. In this article when we arrive at the radial-gradient() method we just need a few example

Linear Gradients

To create a linear gradient we just need two points and a direction specified with the linear-gradient() method. The two points are our endpoints, and the direction is the angle of the gradient. The angle by default is 90 degree with the first color on the top and the last on the bottom.

background: linear-gradient(blue, green);

See the Pen Linear Gradient Example by Adam Laki (@adamlaki) on CodePen.


To change vertical or horizontal direction you can use keywords which are the top, right, bottom, left.

There is two type of it:

  1. the first scenario is when you declare with the simple – like “left” – keyword the starting point,
  2. the second scenario is when you use the “to *” – like “to left” – modifier which makes the opposite, the gradient will not start from that point but instead end in it.
background: linear-gradient(left, blue, green);
background: linear-gradient(to right, blue, green);
The above example give back the same result.

With just the “to” modifier, you can always declare one gradient in two directions. The use case of this modifier is the following: you can change a gradient direction without you have to modify the color order.

Note that, you can also use RGB values with alpha channel so you can make wholly or half transparent gradients.

background: linear-gradient(to right, blue, rgba(0,255,0,.3));

Diagonal Linear Gradients

Using just vertical or horizontal angles not too exciting and of course, we have more option to change direction. Firstly we can combine the previously known values – like left, right, etc. – to a corner position. With this solution, we don’t give a starting side but a starting corner.

background: linear-gradient(top left, blue, green);
background: linear-gradient(to bottom right, blue, green);

See the Pen Diagonal Linear Gradient Example by Adam Laki (@adamlaki) on CodePen.

With this addition positions now we can set 8 different sides or edge, but it is still to precise. To make it more free to use we can use an angle to this parameter so we can declare any value from 0 – 360 degree. Logically we can quickly cover the previous text directional values.

background: linear-gradient(40deg, blue, green);
background: linear-gradient(135deg, blue, green);

As you may know in CSS, you need to use the deg keyword when using angle value.

Color Stops

Using color stops you can make more complicated gradients. You don’t have to limit your assets to two values. On the other hand, you can also configure the transition in your gradient from 0 to 100 percent. Thus you can give extra dynamics.

background: linear-gradient(to bottom, blue, green 80%, red);

See the Pen Linear Gradient Example – Color Stops, and Transparency by Adam Laki (@adamlaki) on CodePen.

You can also provide endless color values separated by a comma. To position the color-stop you have to give a percentage value after the color. In this case, you tell that: from the top start with blue, go to 80% to green and from 80% to 100% go to red.

Radial Gradients

To make radial gradient use the radial-gradient() function similarly to the linear one.

background: radial-gradient(blue, green);
background: radial-gradient(blue, green 50%, red);

See the Pen Radial Gradient Example by Adam Laki (@adamlaki) on CodePen.

There is some difference between the two service, let’s check out what are them!

Specify Radial Gradient Size

Unlike with linear gradient with the radial gradient, you can determine size. Setting the size is briefly means that you can tell which shape you want – a circle or an ellipse – and which side of the container is the standard.

The type keywords are circle and ellipse. To modify the extent you can use the closest-side, closest-corner, farthest-side, farthest-corner keywords to specify the base site of the container.

background: radial-gradient(ellipse closest-side, red, blue);

Repeating Gradients

There are two sibling function to linear-gradient() and radial-gradient() name by repeating-linear-gradient() and repeating-radial-gradient(). As you guessed with them, you can make repeating gradients.

background: repeating-linear-gradient(-45deg, green, green 10px, blue 10px, blue 20px);

See the Pen Repeating Gradient Example by Adam Laki (@adamlaki) on CodePen.

These tools open the gate to a lot of creative solution like Lea Verou CSS3 Patterns Gallery (as you see Lea make some advanced stuff without there repeating ones).

Summarize

To use CSS gradient, you don’t need prefix in the modern browsers so you can leave the auto prefixed and the Sass mixins. Today the transition is a viral design technique so knowing it could be helpful!

In the Next Part

Next time we are going to check the animation part of the gradients which is a bit tricky but beneficial!