Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Linear Gradients in Firefox

Linear Gradients in Firefox


Firefox recently started supporting gradients, but the syntax is significantly different than gradients in WebKit. In this video, you'll learn how to make linear gradients in Firefox.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

    [CSS3 Gradients - Linear Gradients in Firefox - with Nick Pettit] [??]

  • 0:13

    Firefox recently started supporting gradients in their nightly builds.

  • 0:17

    But the syntax is significantly different than the syntax for gradients in WebKit.

  • 0:21

    Let's take a look.

  • 0:23

    Like I said, WebKit is a bit different than the specification,

  • 0:26

    but the syntax works pretty well.

  • 0:29

    Fortunately, Firefox more closely follows the W3C.

  • 0:34

    I'll crate a gradient in Firefox and then walk through each part.

  • 0:39

    We'll delete our WebKit gradient,

  • 0:42

    and we'll type moz-linear-gradient

  • 0:49

    and put in our values,

  • 0:54

    give it some colors,

  • 1:00

    and then we'll switch over to Firefox,

  • 1:04

    and there is a linear gradient in Firefox.

  • 1:08

    The first thing that you'll notice is that instead of specifying the gradient type

  • 1:13

    as an argument passed to the function,

  • 1:15

    we specify that we want a linear gradient in the name of the function.

  • 1:21

    The first two values that are passed to moz-linear-gradient

  • 1:24

    are the X and Y positions for the gradient,

  • 1:28

    measuring from the top left corner.

  • 1:31

    Here I've used percentages, but you could also use pixel values, for example.

  • 1:36

    The third argument is the angle of the gradient.

  • 1:39

    Let's try changing the angle from 0 to 45 degrees.

  • 1:45

    [clicking] So we'll switch back to Firefox and refresh the page,

  • 1:50

    and now our gradient is at a diagonal angle.

  • 1:54

    The last two arguments are the colors.

  • 1:57

    The first one is the starting color, and the second one is the ending color.

  • 2:02

    Again, we can change those just as we did in WebKit.

  • 2:07

    So we'll try changing that to an orange color.

  • 2:12

    Switching back to Firefox, there is a diagonal linear orange gradient.

  • 2:18

    Pretty nifty.

  • 2:20

    That about wraps it up for the basics of CSS3 linear gradients.

  • 2:24

    In the next video we'll explore radial gradients.

  • 2:28

    [?upbeat music?] [Think Vitamin Membership]

  • 2:31


Show full transcript