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 WebKit

Radial Gradients in WebKit

4:58

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