skip to content

CSS: Linear gradients syntax

 Tweet Share0 Tweets

Having already worked through the differences in the radial gradients syntax between WebKit and Firefox browsers I thought that the linear gradients would be simpler, but apparently that's not the case. Now the situation is even more convoluted.

Firstly, we have the original (WebKit) specification, for a single -webkit-gradient capable of describing both linear, radial and (with some tweaking) a form of repeating gradient.

The WebKit syntax has now been replaced by a new (Mozilla) format including four different options for linear, radial and repeating gradients. This has now been adopted by most browsers, including Opera 11 (except for repeating gradients) and Internet Explorer 10.

Before being (CSS3) finalised, however, we can expect a further minor change to the specification where directions are specified using an explicit to instead of an implicit from to indicate direction, so as to match the effect of setting an angle for the gradient.

In the following examples we try to include equivalent styles using each format where possible.

Syntax for CSS Linear Gradients

Here you can see the original syntax which will work in Safari 4 and Chrome (WebKit), and the new format which works also in Firefox 3.6a (Gecko) browsers, and now in Opera 11.10. Finally the proposed unprefixed syntax:

background: -webkit-gradient( linear, <point1>, <point2>, from(<color>), color-stop(<color stop>), to(<color>) ); background: -webkit-linear-gradient(<direction or angle>, <color stop>, <color stop>); background: -moz-linear-gradient(<direction or angle>, <color stop>, <color stop>); background: -o-linear-gradient(<direction or angle>, <color stop>, <color stop>); background: -ms-linear-gradient(<direction or angle>, <color stop>, <color stop>); background: linear-gradient(<to direction> or <angle>, <color stop>, <color stop>);

From the difference in syntax you can see that the Mozilla linear gradient implementation is perhaps more limited, but much more user friendly. You can only specify a single point (or angle) and the gradient will start from there and move to the opposite side/corner or at a specified angle.

The WebKit syntax lets you specify specific points for the gradient to start and end. Before and after these points the first/last colours will continue. Points are specified either with two percentage values (<across> <down>) or two integers representing pixels, but without the 'px' suffix.

In the WebKit syntax case a color stop is comprised of a color (name, hex, rgba) and an optional percentage (0-100) or decimal value (0.0 to 1.0) where from is equivalent to a color-stop with 0.0 and to to a value of 1.0. In the new syntax the distance value can be specified using pixels, ems or a percentage. You can see some examples below.

WebKit browsers now support both the -webkit-linear-gradient option and the -webkit-repeating-linear-gradient option identical to the Mozilla syntax. They also plan to keep the old -webkit-gradient for the forseeable future and it is the only version that currently works on iOS 4 devices.

Basic linear gradient examples

In the box below we have a simple example with a gradient starting in the top left corner of the box with white and ending at the bottom right corner with black. You can see both the old and new WebKit syntax and the equivalent for other browsers:

background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(black)); background: -webkit-linear-gradient(top left, white, black); background: -moz-linear-gradient(top left, white, black); background: -o-linear-gradient(top left, white, black); background: -ms-linear-gradient(top left, white, black); background: linear-gradient(to bottom right, white, black);

Note that the syntax is likely to change, again, replacing top left (specifying the origin point) with to bottom right (specifying the destination point), as shown on the last line.

It's also possible to specify an angle for the gradient rather than a direction. Zero degrees (0deg) creates a left-right gradient while 90deg creates one going from bottom to top. To duplicate the above effect then we specify an angle of 315deg (equivalent to -45deg):

background: -webkit-linear-gradient(-45deg, #fff, #000); background: -moz-linear-gradient(-45deg, #fff, #000); background: -o-linear-gradient(-45deg, #fff, #000); background: -ms-linear-gradient(-45deg, #fff, #000); background: linear-gradient(-45deg, #fff, #000);

Often with background gradients you will want them to appear only at the edge of the element so as not to obscure any text or images. To do this in WebKit we just move the start point to somewhere further across (down) the element. For Firefox we can also use the trick of repeating the first colour as shown here:

background: -webkit-gradient(linear, 0 50%, 0 100%, from(white), to(lightblue)); background: -webkit-linear-gradient(top, white, white, lightblue); background: -moz-linear-gradient(top, white, white, lightblue); background: -o-linear-gradient(top, white, white, lightblue); background: -ms-linear-gradient(top, white, white, lightblue); background: linear-gradient(to bottom, white, white, lightblue);

The results are more or less identical in both browsers. Again, you need to be using either Safari 4 (including iPhones) or Firefox 3.6a (alpha release) to be seeing these effects.

Adding more colours to the gradient

To add intermediary colours WebKit uses the same method as for radial gradients with the color-stop syntax. Different colours can be inserted at points along the gradient with from() and to() being equivalent to color-stops at 0 and 1.

In Firefox it seems that the gradient always covers the entirety of the element, but they've introduced a short-hand to replace the color-stops, allowing us to achieve similar effects. Colours listed without placement information are evenly distributed over the remaining space, as you can see below:

background: -webkit-gradient(linear, 0 50%, 0 100%, from(white), color-stop(0.5, yellow), to(red)); background: -webkit-linear-gradient(top, white 50%, yellow, red); background: -moz-linear-gradient(top, white 50%, yellow, red); background: -o-linear-gradient(top, white 50%, yellow, red); background: -ms-linear-gradient(top, white 50%, yellow, red); background: linear-gradient(to bottom, white 50%, yellow, red);

The linear-gradient syntax is equivalent to placing colour stops as: white 50%, yellow 75% and red 100% as the stops without percentage or distance values will spread out equally to fill the remaining space.

background: -webkit-gradient(linear, 80% 0, 100% 0, from(white), color-stop(0.5, yellow), to(red)); background: -webkit-linear-gradient(0deg, white 80%, yellow 90%, red); background: -moz-linear-gradient(0deg, white 80%, yellow 90%, red); background: -o-linear-gradient(0deg, white 80%, yellow 90%, red); background: -ms-linear-gradient(0deg, white 80%, yellow 90%, red); background: linear-gradient(0deg, white 80%, yellow 90%, red);

Again, the results are more or less identical in different browsers.

Repeating/tiling linear gradients

In all browsers we're now able to tile the background gradient by defining it's dimensions. In this case we have a diagonal gradient from white to lightblue that has been repeated 10 times across the element:

background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(lightblue)); background: -webkit-linear-gradient(top left, white, lightblue); background: -moz-linear-gradient(top left, white, lightblue); background: -o-linear-gradient(top left, white, lightblue); background: -ms-linear-gradient(top left, white, lightblue); background: linear-gradient(to bottom right, white, lightblue); background-size: 10% 100%;

Firefox (and now WebKit) allows for something slightly different. Rather than tiling a slice of the gradient, the gradient can be repeated to infinity. here you can see how that works:

background: -webkit-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: -moz-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: -o-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: -ms-repeating-linear-gradient(-45deg, white 0, lightblue 10%); background: repeating-linear-gradient(-45deg, white 0, lightblue 10%);

And for the browser-impaired here are the screenshots from Safari 4 and Firefox 3.6a. You can see that their implementations are quite different:

Repeating gradients are not yet supported in Opera 12.

Some useful tricks

Column background:

In a table-less layout it's often difficult to include a coloured background from the top of the page to the bottom without using a graphic.

Here we have created a 160-pixel wide solid background with a hard edge. You can add a hard edge to any gradient just by placing two colour stops at the same location (distance):

background: -webkit-gradient(linear, 0 0, 320 0, from(#e0d8b7), color-stop(0.5, #e0d8b7), color-stop(0.5, #fcfaf0), to(#fcfaf0)); background: -webkit-linear-gradient(left, #e0d8b7 160px, #fcfaf0 160px, #fcfaf0); background: -moz-linear-gradient(left, #e0d8b7 160px, #fcfaf0 160px, #fcfaf0); background: -o-linear-gradient(left, #e0d8b7 160px, #fcfaf0 160px, #fcfaf0); background: -ms-linear-gradient(left, #e0d8b7 160px, #fcfaf0 160px, #fcfaf0); background: linear-gradient(to right, #e0d8b7 160px, #fcfaf0 160px, #fcfaf0);

Parallel lines

We can also create a series of lines by using a thin repeating gradient. We've used this technique for the background in our sample code boxes and here you can see it slightly more exagerrated:

background: -webkit-repeating-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1.4em, rgba(66,208,255,0.5) 1.5em); background: -moz-repeating-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1.4em, rgba(66,208,255,0.5) 1.5em); background: -o-repeating-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1.4em, rgba(66,208,255,0.5) 1.5em); background: -ms-repeating-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1.4em, rgba(66,208,255,0.5) 1.5em); background-color: #fcfaf0;

In this case our gradient goes from a transparent colour, to a light blue with some transparency and then back to full transparency. This is overlayed on a solid background colour.

Cartoon backgrounds

This example was copied from our JavaScript Card Game demonstration:

background: -webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px); background: -moz-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px); background: -o-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px); background: -ms-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px); background: repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px); background-color: green; box-shadow: inset 0 0 10px rgba(0,0,0,0.4);

The pattern consists of diagonal stripes with transparency overlaid on a solid colour, which can easily be changed as it's defined separately.

Pattern tiles

Using the background-size property we can clip and tile gradients to create a background texture:

background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.5, white), color-stop(0.5, #fcfaf0), to(#e0d8b7)); background: -webkit-linear-gradient(-45deg, white 35.35px, #fcfaf0 35.35px, #e0d8b7); background: -moz-linear-gradient(-45deg, white 35.35px, #fcfaf0 35.35px, #e0d8b7); background: -o-linear-gradient(-45deg, white 35.35px, #fcfaf0 35.35px, #e0d8b7); background: -ms-linear-gradient(-45deg, white 35.35px, #fcfaf0 35.35px, #e0d8b7); background-size: 50px 50px;

This would probably work better as a page background rather than a background for text.

Multiple backgrounds

Using multiple backgrounds with css gradients and alpha transparency you can create overlays for photos, or for other gradients as shown here:

background-image: -webkit-repeating-linear-gradient(60deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 22px, rgba(255,255,255,0.5) 22px, #fff 82px, rgba(0,0,0,1) 82px, rgba(0,0,0,1) 84px, rgba(0,0,0,0) 84px, rgba(0,0,0,0) 120px), -webkit-linear-gradient(-60deg, #5904f7, #5904f7 33%, #43f63a 33%, #43f63a 67%, #d2b80d 67%, #d2b80d); background-image: -moz-repeating-linear-gradient(60deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 22px, rgba(255,255,255,0.5) 22px, #fff 82px, rgba(0,0,0,1) 82px, rgba(0,0,0,1) 84px, rgba(0,0,0,0) 84px, rgba(0,0,0,0) 120px), -moz-linear-gradient(-60deg, #5904f7, #5904f7 33%, #43f63a 33%, #43f63a 67%, #d2b80d 67%, #d2b80d); background-image: -o-repeating-linear-gradient(60deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 22px, rgba(255,255,255,0.5) 22px, #fff 82px, rgba(0,0,0,1) 82px, rgba(0,0,0,1) 84px, rgba(0,0,0,0) 84px, rgba(0,0,0,0) 120px), -o-linear-gradient(-60deg, #5904f7, #5904f7 33%, #43f63a 33%, #43f63a 67%, #d2b80d 67%, #d2b80d); background-image: -ms-repeating-linear-gradient(60deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 22px, rgba(255,255,255,0.5) 22px, #fff 82px, rgba(0,0,0,1) 82px, rgba(0,0,0,1) 84px, rgba(0,0,0,0) 84px, rgba(0,0,0,0) 120px), -ms-linear-gradient(-60deg, #5904f7, #5904f7 33%, #43f63a 33%, #43f63a 67%, #d2b80d 67%, #d2b80d); background-image: repeating-linear-gradient(60deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 22px, rgba(255,255,255,0.5) 22px, #fff 82px, rgba(0,0,0,1) 82px, rgba(0,0,0,1) 84px, rgba(0,0,0,0) 84px, rgba(0,0,0,0) 120px), linear-gradient(-60deg, #5904f7, #5904f7 33%, #43f63a 33%, #43f63a 67%, #d2b80d 67%, #d2b80d);

In this case we've also fixed one of the gradients so it won't scroll with the page, creating a psychadelic experience when you scroll up and down (not on mobile of course).

References

< CSS

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

User Comments

Post your comment or question

19 October, 2015

Thanks, its nice tutorial over CSS Gradient. Can you tell how many color-stop can be used Gradient.

AFAIK there is no limit to the number of color stops. You can find more details on the syntax here.

9 August, 2013

you forgot the html { height: 100%; }

see your website was on stackoverflow and they were fixing your error. please update it.

stackoverflow.com/questions/18136581/distinct-background-gradient

21 May, 2013

Thanks for the tutor. I'm newbie for CSS and HTML and have to learn so much from the-art-of-web.com. Regards form Indonesia for you all. Thanks

4 March, 2010

I wonder why Mozilla didn't re-use the background's repeat property in order to create repeating gradients. Something like:

background: -moz-linear-gradient(top, #000 0, #fff 10%) repeat-y;

It's supposed to be like a background image, right? Then why not do it this way?

26 December, 2009

Love it! Would like to see example of creating dark to light and back to dark similar to your section dividers. Makes great looking buttons.

top