Bummer! This is just a preview. You need to be signed in with a Basic or Pro 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

2:33

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