• Tutorials
• UX & UI Design
• Web Design

Things You Need to Know about CSS3 Gradients but Were Afraid to Ask [Tutorials]

In order for you not look through the Internet trying to find pieces of information about CCS3 gradient tutorials we’ve decided to unite most essential info in a single place. Gradients are very useful in creating website layouts, CSS3 – desired feature often used and, of course, useful in the design and layout.

In graphics software for digital image editing, the term gradient or color gradient is used for a gradual blend of color which can be considered as an even gradation from low to high values, as used from white to black in the images to the right. Another name for this is color progression.

This is what Wiki says about gradients. If by chance you’re just starting with CSS here are 35 websites that will help get through your learning. So let’s get back to our subject matter – CSS3 gradients. Basically there are two types – linear and radial. We’ll consider both types to understand specifics of their usage.

Linear Gradient

Linear gradient is the one which changes the color from one to another in proportion between two points in a straight line. This is the easiest way – here is an example:

div {/*-prexix-linear-gradient(first color, last color);*/
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}

This is a simple example of a linear gradient that starts with white and ends with black.

***

Lest consider a bit complex example and change the direction of the gradient. In CSS syntax direction is called point and has five values: top, bottom, left, right and center. Accordingly, in the direction you should mention two values – the first is “from”, and the second – “to.” There is one BUT- if only one value is mentioned the second by default will be center.

Ex:

div {background: linear-gradient (center top, # FFF, # 000);}
div {background: linear-gradient (top, # FFF, # 000);}

These lines are similar to the previous ones, for the simplicity the direction values were omitted, as unnecessary.

As an alternative you can use angles value which can be set in several terms, including degrees, radians, and other geometric values. But for simplicity – it is better to use degrees, so that everyone will understand your code. Graduation is clockwise – 0 or 360 is the height, 90 – right, 180 -, and 270 bottom – left. Entries with minus sign are also valid, in this case the grading goes counterclockwise.

Ex:

ex1 {background: linear-gradient (left, # FFF, # 000);}
ex2 {background: linear-gradient (right, # FFF, # 000);}
ex3 {background: linear-gradient (225deg, # FFF, # 000);}

Degrees allow better directing the gradient that can’t be achieved with words.

Adding a Color Stop

So far we have only used a simple gradient, consisting of two colors. Let’s have a look at a more complex example:

div {background: linear-gradient (left, # 000, # FFF, # 000);}

Here we’ve added white between two blacks. The result is a gradient that goes from black to white and back to its original state – to black. Visibility of color stops are shown in a few examples:

ex1 {background: linear-gradient (left, # 000, # FFF, # 000);} 
ex2 {background: linear-gradient (left, # 000, # FFF 75%, # 000);}
ex3 {background: linear-gradient (bottom, # 000, # FFF 20px, # 000);}
ex4 {background: linear-gradient (45deg, # 000, # FFF, # 000, # FFF, # 000);}

The result is below:

Ex1 – white is between two blacks;
Ex2 – white is between two blacks, here we’ve specified the place where to place the color stops, here – 75% from the start;
Ex3 – value of the position of the stop colors can be used not only as a percentage, but in pixels (as well as all other units that CSS understands, but are mainly used percentages and pixels;
Ex4 – five color stops, changes of direction. It is rather simple.

CSS3 Radial Gradient

Radial gradient is a bit more interesting than the linear. But, unfortunately, it’s a bit difficult to fit into the design. Radial gradient is the one that extends from a point in the center along its radius.

E {background: radial-gradient (
position or angle, shape or size,  stop from, the stop-color,  stop to
);}

The syntax is almost the same, with one difference – shape and size are added. The form is of two kinds – the ellipse and a circle (ellipse and circle, respectively, default value: ellipse) size value can be one of the six values. About them below.
The simplest syntax looks like this:

div {background: radial-gradient (# FFF, # 000);}

Radial gradients need to specify a vendor prefix of the browser:

div {
background:-moz-radial-gradient (# FFF, # 000);
background:-ms-radial-gradient (# FFF, # 000);
background:-webkit-radial-gradient (# FFF, # 000);
}

This is how it looks:

Let’s consider more difficult code:

div { background: radial-gradient(contain circle, #FFF, #000); }

Here circle means that the gradient is circular, not elliptical.

Contain – the keywords, which can take a selector size.
Closest-side – the nearest side, gradient extends from the center toward the near side of the element (for circle), or both, horizontal and vertical sides (for the ellipse).
Closest-corner – the gradient extends from the center to the nearest corner of the element.
Farthest-side – gradient extends from the center towards the farthest side of the circle.
Farthest-corner – the gradient extends from the center to the farthest corner of the element.
Contain – similar to the closest-side.
Cover – similar to the farthest-corner.

Some examples for illustration:

ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); }
ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); }
ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); }
ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }

The code result:

Ex1 – round gradient, that extends to the far side (used farthest-side);
Ex2 – the center is on the left side, the gradient extended to the far side;
Ex3 – the center is at the top right side, the gradient extends to the far corner;
Ex4 – the center is located in the point 50% of the width, 80% height.

Adding a Color Stop

As with linear gradients – radial are also able to work with multiple colors. Their use is no different from the linear, so here are a few examples:

ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); }
ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); }
ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); }
ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }

***

Now it’s time to have a look at some tools and tutorials that will definitely ease your work with CCS gradients.

Cross Browser CSS Gradients

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers.

***

CSS3 Gradient Buttons

The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

***

Speed Up with CSS3 Gradients

Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

***

CSS3 Gradient Generator

Select the format you would like your colors generated in. Available options are HEX and RGB.

***

CSS Gradients – Quick Tutorial

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now. However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers.

***

CSS3 Gradient Backgrounds

Lots of CSS gradient code for most popular browsers. Check it out!

***

Got something to say use the comments below.