Mozilla

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( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

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(<angle>, 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([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

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.

56 comments

Comments are now closed.

  1. Gilberto Ramos wrote on November 30th, 2009 at 11:22:

    very interesting! =)

  2. Asa Dotzler wrote on November 30th, 2009 at 11:25:

    Can’t wait to see this in Firefox UI.

  3. lourdes wrote on November 30th, 2009 at 11:35:

    Muy bueno!

  4. Pingback from CSS gradient syntax: comparison of Mozilla and WebKit (Part 2) | Broken Links on November 30th, 2009 at 12:46:

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

  5. Peter Gasston wrote on November 30th, 2009 at 12:48:

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

  6. Wolf wrote on November 30th, 2009 at 12:55:

    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)

    1. Tab Atkins wrote on May 20th, 2010 at 16:39:

      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.)

  7. Pingback from building beautiful buttons with css gradients at hacks.mozilla.org on November 30th, 2009 at 14:10:

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

  8. Neil Rashbrook wrote on December 1st, 2009 at 04:02:

    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.

  9. Richard Taylor wrote on December 1st, 2009 at 04:09:

    @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

    1. Tab Atkins wrote on May 20th, 2010 at 16:13:

      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.

  10. Trompette wrote on December 1st, 2009 at 09:22:

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

  11. Georgiy wrote on December 2nd, 2009 at 01:37:

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

  12. Pingback from css backgrounds in Firefox 3.6 at hacks.mozilla.org on December 2nd, 2009 at 11:49:

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

  13. Pingback from Tydzień 49. « ★ afk kawa on December 6th, 2009 at 14:30:

    [...] 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, [...]

  14. Alan Hogan wrote on December 20th, 2009 at 14:15:

    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.

  15. Luiz Socrate wrote on December 21st, 2009 at 15:55:

    @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%

    ;)

    1. Tab Atkins wrote on May 20th, 2010 at 15:42:

      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%).

  16. Jimmo wrote on December 27th, 2009 at 12:04:

    Wow! Great work…

  17. Pingback from » Cross-browser CSS gradients fakedarren on January 9th, 2010 at 08:59:

    [...] Firefox gradients [...]

  18. Pingback from Silentash-默尘 » 星级评分效果与可访问性 on January 18th, 2010 at 05:33:

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

  19. Pingback from Firefox 3.6 – Alla nyheter | jenst.se on January 20th, 2010 at 10:50:

    [...] Gradienter med CSS3 [...]

  20. Pingback from chrismaynard.net » Blog Archive » Gradients in FireFox 3.6 on January 21st, 2010 at 11:22:

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

  21. Eric Newlon wrote on January 21st, 2010 at 14:31:

    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!

    1. Vivek A. Bhosale wrote on January 28th, 2010 at 23:49:

      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.

    2. Tab Atkins wrote on May 20th, 2010 at 15:40:

      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.

  22. Angel G. wrote on January 21st, 2010 at 19:56:

    Whoa! this is pretty good!

  23. Pingback from Firefox 3.6 Is Out Now on January 23rd, 2010 at 01:53:

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

  24. Pingback from Learn how to use CSS gradients that are supported by Firefox 3.6 « Web Page Authority Blog on January 25th, 2010 at 10:18:

    [...] 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. [...]

  25. Pingback from Jazzing up the Chrome « Al Binns' Web Stuff on January 25th, 2010 at 13:39:

    [...] 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 [...]

  26. Pingback from GirlieMac! Blog | CSS3 Aqua Button – Revisited for Firefox 3.6 on January 28th, 2010 at 14:17:

    [...] 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 [...]

  27. DesignerSandbox wrote on February 2nd, 2010 at 18:24:

    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

  28. Frank Bright wrote on February 6th, 2010 at 05:58:

    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.

  29. Raff wrote on February 18th, 2010 at 14:21:

    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.

  30. dev wrote on February 21st, 2010 at 15:23:

    Awesome is really awesome, but syntax not really that friendly

  31. April Hollands wrote on February 22nd, 2010 at 02:37:

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

  32. Raff wrote on February 22nd, 2010 at 12:57:

    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.

  33. Dan wrote on March 4th, 2010 at 05:37:

    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?

  34. Steven Seagal wrote on May 28th, 2010 at 18:23:

    AWESOME! MORE BROWSER-SPECIFIC CODE!!!!

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

  35. Pingback from CSS 그라데이션(gradient)으로 멋진 버튼 만들기 ✩ Mozilla 웹 기술 블로그 on June 23rd, 2010 at 20:44:

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

  36. Pingback from Design a Prettier Web Form with CSS 3 « FED视野 on July 1st, 2010 at 19:18:

    [...] 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 [...]

  37. Pingback from 파이어폭스 3.6의 css 배경 ✩ Mozilla 웹 기술 블로그 on August 3rd, 2010 at 22:45:

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

  38. freakqnc wrote on August 4th, 2010 at 08:47:

    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! ;)

  39. freakqnc wrote on August 4th, 2010 at 08:51:

    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 ;)

    1. cssdoodler wrote on August 13th, 2010 at 09:21:

      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.

      1. BR wrote on January 30th, 2011 at 18:27:

        “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!

  40. Pingback from Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element ✩ Mozilla Hacks – the Web developer blog on August 24th, 2010 at 13:50:

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

  41. Avik Mitra wrote on September 21st, 2010 at 02:05:

    Amazing !!!!!! Great work…

  42. ArielMacintosh™ wrote on November 11th, 2010 at 12:45:

    ¡Exelente!

  43. Pingback from Firefox vs Starfox « eyeamnotme on January 12th, 2011 at 03:57:

    [...] 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 [...]

  44. Pingback from Cross browser gradients with CSS3 and SVG « Sharing thoughts on web design, photography and more on February 3rd, 2011 at 12:27:

    [...] 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 [...]

  45. Pingback from aHmetfatiH » Blog Archive » CSS Renk Geçişleri (Gradients) on August 19th, 2011 at 13:33:

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

  46. id meneo wrote on September 9th, 2011 at 09:29:

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

  47. Gholamreza wrote on April 7th, 2012 at 04:13:

    It is distinctly helpful, thank you

  48. Pingback from Cross browser gradients with CSS3 and SVG Resources « CSS Tips on June 19th, 2012 at 21:09:

    [...] 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 [...]

  49. Ritesh P wrote on July 19th, 2012 at 18:54:

    Great article…………….

Comments are closed for this article.