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

Radial Gradients in WebKit


In addition to linear gradients, the CSS3 Image Values module also specifies a syntax for radial gradients. In this video, you'll learn about the syntax for radial gradients in WebKit.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

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

  • 0:13

    In addition to linear gradients, the CSS3 image values module

  • 0:16

    also specifies a syntax for radial gradients.

  • 0:19

    Here's how they work:

  • 0:21

    To start out, let's first create a radial gradient,

  • 0:25

    and then we'll step through the syntax one piece at a time.

  • 0:29

    Again, we're going to start out with the WebKit syntax

  • 0:33

    and then move on to Firefox.

  • 0:35

    So first we'll type out our background image property

  • 0:41

    and to it we'll apply a WebKit gradient,

  • 0:46

    and we want this to be a radial gradient,

  • 0:49

    and we want to center it on our element,

  • 0:55

    and then we'll apply a few colors.

  • 0:59

    We'll use our same nice blue tone,

  • 1:04

    and we'll have that fade into black.

  • 1:10

    So switching over to Google Chrome,

  • 1:13

    that is what a radial gradient looks like.

  • 1:16

    So that was a lot of stuff to type out.

  • 1:19

    Let's go through each part one at a time.

  • 1:23

    The first argument that I pass to the WebKit gradient function is radial.

  • 1:30

    Again, this is a keyword that can be either linear or radial,

  • 1:34

    and by saying radial, we're telling the WebKit gradient function

  • 1:38

    that we want to use a radial gradient.

  • 1:41

    The next several values specify a couple of things.

  • 1:44

    WebKit defines radial gradients in terms of an inner circle and an outer circle.

  • 1:50

    Each of the two circles have an origin and a radius.

  • 1:56

    The first set of values that say "center center" are for the inner circle,

  • 2:00

    and they tell the browser that the inner circle should be at the center of the element.

  • 2:06

    In other words, the origin of the inner circle should be at the center.

  • 2:11

    This particular argument also accepts many other directional keywords,

  • 2:15

    pixel values, and percentage values.

  • 2:18

    For now, though, we'll center our gradient in the middle.

  • 2:22

    Right after the first center center is the radius of the inner circle.

  • 2:29

    Typically this is set to 0,

  • 2:31

    but if you want a solid inner color with gradations on the outside,

  • 2:36

    you could increase this radius.

  • 2:38

    So for example, let's try putting in 100 instead of 0.

  • 2:44

    So switching over to Google Chrome, that's what that looks like.

  • 2:49

    And you can see that the inner circle is now a solid color

  • 2:52

    instead of a gradual gradient to the outer circle.

  • 2:57

    The important thing to remember here is that while you can set the inner radius

  • 3:01

    to be larger than the outer radius, if you set it too large,

  • 3:05

    the browser won't render anything at all.

  • 3:08

    So for example, if I were to set the inner radius to something like 1,000

  • 3:13

    and I switch back to Google Chrome, you can see that it won't render anything at all.

  • 3:19

    So let's change that back to 0.

  • 3:23

    Now, the next set of values specify all the same things that we just talked about

  • 3:28

    but for the outer circle.

  • 3:30

    So for the outer circle we can set the origin and the radius.

  • 3:35

    Something that's kind of interesting about defining gradients as two concentric circles

  • 3:39

    like this is that they don't necessarily have to have the same origin.

  • 3:45

    Let's try offsetting the origin of the outer circle a bit.

  • 3:49

    So instead of center center, we'll type 150 pixels for the X and Y values.

  • 3:57

    And if we switch back over to Google Chrome,

  • 4:01

    that's what it looks like when the two concentric circles don't have the same origin.

  • 4:07

    This allows you to create some interesting effects.

  • 4:10

    But one thing to be aware of is that if the two circles intersect one another,

  • 4:14

    you can get some very strange results.

  • 4:17

    Let's make the circles intersect on purpose as an example.

  • 4:21

    So we'll change the origin of the outer circle to be in the upper left corner.

  • 4:28

    If we refresh the browser, you can see that we get some very strange results.

  • 4:36

    The origin of the inner circle is still set to be at the center of the element,

  • 4:42

    but I've changed the outer circle's origin to be in the upper left corner.

  • 4:45

    The bright orange color showing through is there

  • 4:48

    because the element also has a solid background specified.

  • 4:53

    [?upbeat music?] [Think Vitamin Membership]

  • 4:56


Show full transcript