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
Radial Gradients in Firefox

Radial Gradients in Firefox

3:46

Just as is the case with linear gradients, the syntax for radial gradients is significantly different in Firefox than it is in WebKit. In this video, you'll learn how to create radial gradients in Firefox.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:08

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

  • 0:13

    Just as is the case with linear gradients, the syntax for radial gradients

  • 0:17

    is significantly different in Firefox than it is in WebKit.

  • 0:21

    Let's take a look.

  • 0:23

    Let's start by creating a radial gradient that will work in Firefox.

  • 0:27

    So I will type out the background image property,

  • 0:33

    and we'll apply a moz-radial-gradient,

  • 0:42

    and we'll put it in the center of our element,

  • 0:50

    give it a color,

  • 0:58

    give it a color to fade to,

  • 1:03

    and if we switch over to Firefox,

  • 1:07

    that's what our radial gradient looks like.

  • 1:10

    Switching back to the text editor, the first thing that you'll notice

  • 1:13

    is that the type of gradient is specified in the name of the function

  • 1:18

    rather than as an argument passed to the function.

  • 1:22

    This is the same way that linear gradients work in Firefox.

  • 1:26

    The first set of arguments that are passed to the moz-radial-gradient function

  • 1:31

    tell the browser where to position the origin.

  • 1:34

    The default is center, and for now we'll leave it like that.

  • 1:38

    Next is the shape of the gradient.

  • 1:41

    The two options here are keywords "circle" and "ellipse."

  • 1:45

    We'll get into elliptical gradients in the next video,

  • 1:48

    but for now we'll leave the shape as a circle.

  • 1:53

    Next is the size of the gradient.

  • 1:55

    This is defined as a set of size constants.

  • 1:59

    In this case we've used the keyword "closest corner,"

  • 2:02

    which makes sure the gradient is sized in such a way

  • 2:06

    so that it reaches the corner that is closest to its origin.

  • 2:12

    To see this in action, we need to move the origin of our circle.

  • 2:17

    So first I'll change center to 100 pixels.

  • 2:22

    Switching back over to Firefox, you can see how the origin has moved over to the left.

  • 2:30

    Again, closest corner will size the gradient so that it hits the corner of the element

  • 2:35

    that is closest to its origin.

  • 2:38

    Now let's try farthest corner.

  • 2:41

    So we'll flip back to our text editor and change "closest" to "farthest"

  • 2:50

    and refreshing the browser, you can see that farthest corner will,

  • 2:54

    just as the name implies, size the gradient so that it hits the corner

  • 3:00

    that is farthest away from the origin of the circle.

  • 3:04

    Other constants include closest side and farthest side.

  • 3:09

    The last two arguments are the color stops,

  • 3:12

    and these color stops work just like they do in linear gradients.

  • 3:16

    The inner color is first, and the outer color comes second.

  • 3:22

    Let's try changing the outer color to a hot pink color

  • 3:26

    just so you can see what that looks like.

  • 3:30

    And there is our radial gradient with two different colors.

  • 3:34

    That covers the basics of radial gradients.

  • 3:37

    In the next video we'll take a look at some additional gradient syntax.

  • 3:41

    [?upbeat music?] [Think Vitamin Membership]

  • 3:44

    [??]

Show full transcript