css gradients in Firefox 3.6

Firefox 3.6 includes many CSS improvements. In this post we’re going to show you how to use CSS gradients.

If you are running the latest beta of Firefox 3.6, you should check out our interactive demo and take a look at the corresponding code. Use the radio buttons to switch different style options on or off.

Backgrounds with CSS Gradients

Using CSS gradients in a background allows you to display smooth transitions between two or more specified colors without having to use images. This in turn reduces download time and bandwidth use, looks better while zooming, and lets you create a more flexible layout.

Firefox 3.6 supports two kinds of CSS gradients: linear (-moz-linear-gradient) and radial (-moz-radial-gradient).

Linear Gradients

To create a linear gradient, you’ll need to set a starting point and a direction (or angle) for the gradient and to define the color stops.

 -moz-linear-gradient( [ || ,]? ,  [, ]* )

Starting Point. The starting point works just like background position. You can set the horizontal and the vertical positions as a percentage, in pixels, or using left/center/right for horizontal, and top/center/bottom for vertical. Positions start from the top left corner. If you don’t specify the horizontal or the vertical position, it will default to center.

For example, here’s a linear gradient that starts at the center (horizontal) and top (vertical), and goes from blue to white:

basic_linear_bluetop

  .linear_gradient_square {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: -moz-linear-gradient(top, blue, white);
  }

One that starts left (horizontal) and center (vertical):

basic_linear_blueleft

    background: -moz-linear-gradient(left, blue, white);

And a gradient starting left (horizontal) and top (vertical):

basic_linear_bluetopleft

    background: -moz-linear-gradient(left top, blue, white);

Angle. As you can see above, if you don’t specify an angle, it is defined automatically based on the start position. If you would like more control over the direction of the gradient, you can set the angle as well.

For example, the following gradients have the same starting point of left center, but the one on the right hand-side also has an angle of 20 degrees.

linear_gradient_angle

    background: -moz-linear-gradient(left 20deg, black, white);

When specifying the angle, remember that is it the angle between a horizontal line and the gradient line, going counter-clockwise. So using 0deg will generate a left to right horizontal gradient, while 90deg will create a vertical gradient from the bottom to the top.

linear_redangles

    background: -moz-linear-gradient(, red, white);

Color Stops. In addition to start position and angle, you should specify color stops. Color stops are points along the gradient line that will have the specified color at the specified location (set as a percentage or length). The number of color stops is unlimited. If you use a percentage for the location, 0% represents the starting point, and 100% is the ending point, but values above and below those can be used to achieve the desired effect.

Here’s a simple example with three color stops. Because no point is specified for the first and last colors, they will default to 0% and 100%.

linear_colorstops

    background: -moz-linear-gradient(top, blue, white 80%, orange);

Colors will be evenly spaced if no position is specified.

linear_rainbow

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Transparency. Gradients also support transparency. This can be useful, for example, when stacking multiple backgrounds. Here’s a combination of two backgrounds: one image and one linear gradient from white to transparent white.

linear_multibg_transparent

.multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}

Radial Gradients

The syntax for radial gradients is very similar to that of linear gradients:

 -moz-radial-gradient([ || ,]? [ || ,]? , [, ]*);

In addition to the start position, the direction, and the colors, which you have already seen in linear gradients, radial gradients allow you to specify the gradient’s shape (circle or ellipse) and size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover).

Color stops. Just like with linear gradients, you should define color stops along the gradient line. The following circles have the same color stops, but the gradient on the left defaults to evenly spaced colors, while the one on the right has a specific position for each color.

radial_gradient_stop

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Shape. Here you can see the difference between the two possible shapes, a circle (on the left) and an ellipse (on the right), both with a bottom left starting point:

radial_circle_ellipse

 .radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

Size. The different options for size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover) refer to the point used to define the size of the circle or ellipse.

Example: closest-side vs. farthest corner for an ellipse.
The following two ellipses have different sizes. The one on the left is set by the distance from the start point (center) to the closest-side, while the one on the right is determined by the distance from the start point to the farthest corner.

radial_ellipse_size

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side vs. farthest-side for a circle.
The size of the circle on the left is determined by the distance between the start point (the center) and the closest side, while the one on the right is the distance between the start point and the farthest side.

radial_circle_size

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
 background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

Example: contained circle.
Here you can see the default circle on the left, and the version of the same gradient but contained on the right.

radial_contain

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

Repeating Gradients

If you would like to repeat a gradient, you should use -moz-repeating-linear-gradient and -moz-repeating-radial-gradient.

In the examples below, four color stops are specified in each case, and are repeated indefinitely.

repeating_gradients

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

Demo

Check out our interactive demo of linear and radial gradients for more examples.

Note that the gradient syntax has changed between Firefox 3.6 beta 1 and beta 2, so if you used gradients with beta 1, you may need to update your code.

About Alix Franquet

More articles by Alix Franquet…


56 comments

  1. Gilberto Ramos

    very interesting! =)

    November 30th, 2009 at 11:22

  2. Asa Dotzler

    Can’t wait to see this in Firefox UI.

    November 30th, 2009 at 11:25

  3. lourdes

    Muy bueno!

    November 30th, 2009 at 11:35

  4. […] Update: Just after I finished this article, Mozilla Hacks published an in-depth look at the new syntax. […]

    November 30th, 2009 at 12:46

  5. Peter Gasston

    I’ve just written a pair of posts comparing this syntax with the one originally proposed by the WebKit team: Part One; Part Two.

    November 30th, 2009 at 12:48

  6. Wolf

    Very cool. I can imagine using moz gradients to render 90 degree 1px black lines/1px white lines on the body element to be heavy on the browser rendering engine – is that true at all?

    (e.g. for a scanline effect)

    November 30th, 2009 at 12:55

    1. Tab Atkins

      Not particularly. Try it out yourself:

      body { background: -moz-repeating-linear-gradient(white 0px, white 1px, black 1px, black 2px); }

      (Note – the repeating-*-gradient() functions are not part of the standard.)

      May 20th, 2010 at 16:39

  7. […] About « css gradients in Firefox 3.6 […]

    November 30th, 2009 at 14:10

  8. Neil Rashbrook

    Technically CSS gradients are a form of background image. Fortunately Gecko 1.9.2 supports multiple background images, so you can place an image in front of a gradient.

    December 1st, 2009 at 04:02

  9. Richard Taylor

    @Neil – I did wonder about the stacking order of background fills – will there be a way to manipulate it? To change Image > Gradient to Gradient > Image

    December 1st, 2009 at 04:09

    1. Tab Atkins

      Yup, just swap the order that they appear in the background property. The first background image to appear is on top, subsequent ones are drawn below that, until you hit the background-color which is on the very bottom below any images.

      May 20th, 2010 at 16:13

  10. Trompette

    Does someone now if the WebKit team plans to use this great syntax instead of their current one?

    December 1st, 2009 at 09:22

  11. Georgiy

    Yeah, the syntax is really great compared to Webkit’s one. You rock guys!

    December 2nd, 2009 at 01:37

  12. […] 3.6 allows you to do more with CSS backgrounds: you can use gradients, set a background size, and specify multiple […]

    December 2nd, 2009 at 11:49

  13. […] CSS gradients in Firefox 3.6 opisuje, w jaki sposób, będzie można wycisnąć gradienty ze zbliżającego się wielkimi krokami Firefoxa 3.6, […]

    December 6th, 2009 at 14:30

  14. Alan Hogan

    I am disappointed to see that one cannot pick the “ending point” of the gradient. -webkit-gradient allows me to pick the “top left” as the origin and “right center” as the end of the linear gradient. It actually makes a big difference for the design I am working with.

    December 20th, 2009 at 14:15

  15. Luiz Socrate

    @Alan Hogan: Just define the end as a double stop.
    e.g.
    -moz-linear-gradient(top, blue, white 80%, white)
    That would render a top to bottom blue to white gradient stopping at 80%

    ;)

    December 21st, 2009 at 15:55

    1. Tab Atkins

      You don’t even need to double-specify the end – just write -moz-linear-gradient(top, blue, white 80%). The last color-stop is used for anything that comes after it, so from 80% to 100%, and on for forever, the gradient will be white (and it’s blue for all percentages below 0%).

      May 20th, 2010 at 15:42

  16. Jimmo

    Wow! Great work…

    December 27th, 2009 at 12:04

  17. […] Firefox gradients […]

    January 9th, 2010 at 08:59

  18. […] css gradients in Firefox 3.6 […]

    January 18th, 2010 at 05:33

  19. […] Gradienter med CSS3 […]

    January 20th, 2010 at 10:50

  20. […] http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ for more […]

    January 21st, 2010 at 11:22

  21. Eric Newlon

    Everybody loves new features, but what is really needed is cross browser standardization so you don’t have to write browser specific code. These fancy features always pop up in specific browser development by nobody uses them because it is easier and apply the old way… like rounded corners in Firefox, it only works in Firefox – why should a web designer go through the extra time and effort to use it when they will have to use the graphical method anyway to work in other browsers. I’m all for new features development… but give us a break – we need standardization!

    January 21st, 2010 at 14:31

    1. Vivek A. Bhosale

      I completely agree with Eric. it’s terrific work that Firefox did. but from our (web designers) point of view, it’s not usable until it not work in other browser or we just need to make site for Firefox only.

      but the positively, it is good work.

      January 28th, 2010 at 23:49

    2. Tab Atkins

      This feature is indeed standardized – it appears in the CSS Images Module level 3.

      However, the webkit (Safari and Chrome) implementation of gradients appeared before this was standardized. In fact, the standardization happened *because* of the webkit implementation, to fix problems and weaknesses that were found in the syntax.

      Firefox just happens to be the first to implement this new property, but all browsers should implement it in the future.

      May 20th, 2010 at 15:40

  22. Angel G.

    Whoa! this is pretty good!

    January 21st, 2010 at 19:56

  23. […] now offers gradients, multiple backgrounds, and scalable […]

    January 23rd, 2010 at 01:53

  24. […] css gradients in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog Firefox 3.6 includes many CSS improvements. In this post we’re going to show you how to use CSS gradients. […]

    January 25th, 2010 at 10:18

  25. […] you can do with gradients in Firefox 3.6 so if you’re interested I suggest you take a look at Mozilla Hacks which has a great set of […]

    January 25th, 2010 at 13:39

  26. […] the end of November last year, Mozilla Hacks announced the support for CSS gradient in a background on upcoming Firefox 3.6 (which final version has just […]

    January 28th, 2010 at 14:17

  27. DesignerSandbox

    This is very interesting to see.
    Kinda like working with gradient in photoshop, but with CSS instead.
    Specially like the gradient that work with the background image.
    Nice

    February 2nd, 2010 at 18:24

  28. Frank Bright

    Hi, I’m newer at CSS and this has worked well for me putting it into a table, but I’m wondering if this code can be used more directly in the body {} section in the to specify the general body background .

    I’ve tried copying the code and putting it to specify a body background, but it comes up with nothing – I just get solid white.

    February 6th, 2010 at 05:58

  29. Raff

    I added
    body {
    background:-moz-linear-gradient(top left 45deg, blue, white);
    background:-webkit-gradient(linear, top left,bottom right,from(blue), to(white));
    }
    In FF3.6 the gradient runs smoothly only to the bottom of the last element of the page and then it repeats itself. This is not what I would expect, in fact it looks horrible. In Safari, the color runs down to the bottom of the window.

    February 18th, 2010 at 14:21

  30. dev

    Awesome is really awesome, but syntax not really that friendly

    February 21st, 2010 at 15:23

  31. April Hollands

    Thanks very much for this: really well explained and great graphics along the way.

    February 22nd, 2010 at 02:37

  32. Raff

    I retract from my complaint, the broken pattern was fixed by adding height:100% to the body tag. Now it looks great.
    Too bad it cannot be used if we want to keep standards compliance.

    February 22nd, 2010 at 12:57

  33. Dan

    Why didn’t you make use of the background-repeat property for repeating gradients? Seems logical to me, or are there any backwards-compatibility concerns or something?

    March 4th, 2010 at 05:37

  34. Steven Seagal

    AWESOME! MORE BROWSER-SPECIFIC CODE!!!!

    Why can we not update the W3C CSS standard incrementally, and simply have all browsers support that standard?

    May 28th, 2010 at 18:23

  35. […] 추가된 그라데이션(gradient) 기능을 사용하는 간단한 예를 살펴볼 것입니다(관련글 보기). gradient와 기존의 CSS 속성을 사용하여 양각화와 빗면 처리가 된 멋진 […]

    June 23rd, 2010 at 20:44

  36. […] easy to grasp, gradients are trickier. With CSS3 gradients, you can create some amazing shapes — from dart boards to rainbows — so as you can imagine it has a more complex syntax. Thankfully, we don’t need to code a […]

    July 1st, 2010 at 19:18

  37. […] 3.6은 css 배경에 대해 더 많은 것을 지원합니다. 그레디언트(http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/)와, 배경이미지 사이즈background size,  그리고 여러 개의 배경 이미지multiple […]

    August 3rd, 2010 at 22:45

  38. freakqnc

    Why W3C always overcomplicates shtuff and people have to resort to “hacks” to make things work? For once it would be nice to have features that would require no friggin hacks and secret firggin davinci codes!!! :

    Wouldn’t it be simpler use instructions in gosh darn English? maybe something like: top-bottom, 30deg linear-gradient [comma separated array of colors and percentages] this with some variations such as being able to specify start-end coordinates of a gradients could also be used for other kind of gradients like elliptical, diamond and so on.

    Who comes up with these convoluted crap!? We need to simplify not overcomplicate! Are we going to end up to write the darn code in aramaic to make it more browser friendly???

    There is already a language that could be used to describe in a logic manner the properties of a specific feature and that’s English! That’s just my 2¢ and you may by all means disagree with it (especially if you are one of those involved in coming up with these standards at W3C ;P), but maybe we should start using English in a more efficient and less “esoteric and hermetic” manner when it comes to markup languages to make everyone’s life easier! ;)

    August 4th, 2010 at 08:47

  39. freakqnc

    By the way has anyone found a way to use this method to fill the page’s background with a simple gradient that will stretch with the browser’s window resizing? I do not want to hard-code any sizes for a div. I would simply like to be able to set a subtle background for the body of the page and let the content float on top as needed. Any suggestions welcome ;)

    August 4th, 2010 at 08:51

    1. cssdoodler

      For FF3.6 and higher, this CSS rule seems to work. The gradient fills the viewport and refills with changes in window size.

      html {
      width: 100%;
      height: 100%;
      background-image: -moz-radial-gradient(200px 0, circle cover, blue, black);
      }

      Setting the width and height properties to 100% is important if you want to fill the entire viewport.

      August 13th, 2010 at 09:21

      1. BR

        “Setting the width and height properties to 100% is important if you want to fill the entire viewport.”

        Thank you! Minor tweak saved a lot of time!

        January 30th, 2011 at 18:27

  40. […] feature overlaps the functionality of CSS gradients and SVG images, but is very useful in some situations, such as animations. For example, say you […]

    August 24th, 2010 at 13:50

  41. Avik Mitra

    Amazing !!!!!! Great work…

    September 21st, 2010 at 02:05

  42. ArielMacintosh™

    ¡Exelente!

    November 11th, 2010 at 12:45

  43. […] Using CSS gradients in a background allows you to display smooth transitions between two or more specified colors without having to use images. This in turn reduces download time and bandwidth use, looks better while zooming, and lets you create a more flexible layout. Firefox 3.6 supports two kinds of CSS gradients: linear (-moz-linear-gradient) and radial (-moz-radial-gradient). hacks.mozilla.org […]

    January 12th, 2011 at 03:57

  44. […] css gradients in Firefox 3.6 a great post from the Mozilla Hacks blog that goes into the details of Mozilla 3.6 multiple gradient possibilities […]

    February 3rd, 2011 at 12:27

  45. […] http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ (Mozilla dan ayrıntılı) […]

    August 19th, 2011 at 13:33

  46. id meneo

    Very nice! this post is very useful to me, thx because gradients are everywhere now.

    September 9th, 2011 at 09:29

  47. Gholamreza

    It is distinctly helpful, thank you

    April 7th, 2012 at 04:13

  48. […] css gradients in Firefox 3.6 a great post from the Mozilla Hacks blog that goes into the details of Mozilla 3.6 multiple gradient possibilities […]

    June 19th, 2012 at 21:09

  49. Ritesh P

    Great article…………….

    July 19th, 2012 at 18:54

Comments are closed for this article.