Linear Gradients in WebKit


In the Image Values module of CSS3, the W3C specifies syntax for creating gradients without the use of images or ugly markup hacks. In this video, you'll learn how to create linear gradients in WebKit.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

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

  • 0:13

    In the image values module of CSS3,

  • 0:16

    the W3C specifies a syntax for creating gradients

  • 0:20

    without the use of images or other ugly markup hacks.

  • 0:24

    In this video we're going to learn the basics of CSS3 gradients.

  • 0:27

    Let's dive in.

  • 0:29

    As you can see here, I've created a basic page for us to work with,

  • 0:33

    and this is the div that we are going to be applying our linear gradients to.

  • 0:38

    Switching over to my text editor, pretty standard stuff.

  • 0:41

    I just have a wrapper div and the div that you just saw on the browser.

  • 0:46

    I've also added in some basic CSS just to kind of bootstrap the page

  • 0:51

    and make things a little bit prettier for us to look at.

  • 0:55

    To create our linear gradients, we will be working in a separate style sheet

  • 0:59

    just for the sake of clarity.

  • 1:01

    So let's start by creating a gradient that runs from the left side of the screen to the right.

  • 1:07

    I'll type it out so that you can see what it looks like,

  • 1:10

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

  • 1:14

    So first things first, I need to select my div.

  • 1:19

    And then I'm going to type out the background image property,

  • 1:25

    and we'll apply a WebKit gradient to it.

  • 1:32

    We want it to be a linear gradient.

  • 1:35

    We'll set the points here. [clicking]

  • 1:43

    And we'll have it go from a nice, rich blue color

  • 1:53

    over to black.

  • 1:58

    Switching over to Google Chrome, that's what a linear gradient looks like.

  • 2:04

    So let's switch back to the text editor and break this down.

  • 2:09

    The first thing that you probably noticed

  • 2:11

    is that gradients aren't actually a new property at all

  • 2:15

    because here we applied a gradient to the background image of our div.

  • 2:22

    Gradients are actually part of a new CSS3 module called the image values module

  • 2:28

    in which there are several ways to create generated imagery.

  • 2:32

    We'll talk more about this in another video,

  • 2:34

    but for now we'll apply all of our gradients to background images.

  • 2:39

    To our background image we applied the WebKit gradient function

  • 2:45

    to generate our gradient.

  • 2:47

    The WebKit vendor prefix is there, so that when the W3C finalizes the syntax

  • 2:51

    for gradients, there aren't any compatibility issues.

  • 2:55

    This is especially important because although the WebKit syntax works just fine,

  • 3:00

    it's slightly deviant from the working draft of the image values CSS3 module.

  • 3:07

    As you can see, the WebKit gradient function takes a lot of arguments.

  • 3:13

    The first one is the type of gradient.

  • 3:16

    In this case we've chosen to use a linear gradient.

  • 3:21

    This type is actually a keyword that can be set to either linear or radial,

  • 3:27

    and of course in this case we've used the keyword "linear," which we'll stick with for now.

  • 3:31

    But we'll explore radial gradients in the next video.

  • 3:35

    The next two arguments are called points.

  • 3:38

    Each point has two space-separated values,

  • 3:42

    the first value being for X and the second value being for Y.

  • 3:47

    The two points create a 2D line in space that plots out the linear gradient

  • 3:52

    starting with the first point and moving across to the second point.

  • 3:56

    If no unit is specified for the value,

  • 3:59

    it is assumed to be pixels.

  • 4:01

    However, percentages will also work, and that's what we've used here in our example.

  • 4:07

    The first point is set to be in the middle of the left side of the box,

  • 4:12

    and the second point is set to be in the middle of the right side of the box.

  • 4:18

    Let's say instead that we wanted our gradient to run vertically instead of horizontally.

  • 4:23

    We would change the X value for the first point to 50%

  • 4:29

    and the Y value to 0.

  • 4:32

    And for the second point we would change the X value to 50%

  • 4:36

    and the Y value to 100%.

  • 4:40

    Switching over to Google Chrome, you can refresh,

  • 4:43

    and that's what a vertical linear gradient looks like.

  • 4:47


  • 4:49

    Finally, we come to the stop arguments, and those are the last two arguments

  • 4:53

    right here and right here.

  • 4:55

    In this case we've used a shorthand syntax for the sake of simplicity.

  • 4:59

    The from function and the to function both take a single color value

  • 5:04

    that tells the browser what color the gradient should start on

  • 5:07

    and what color it should end on.

  • 5:10

    Here we're going from a rich blue tone down to black.

  • 5:15

    Let's change one of these colors so that you can see what's going on here.

  • 5:19

    I'll change the blue tone over to a bright orange color.

  • 5:26

    Switching back to Google Chrome, that's what that looks like.

  • 5:32

    Now, we've used hexadecimal values in this case,

  • 5:35

    but you could also use any other color model in CSS3.

  • 5:39

    For example, if you wanted to adjust the opacity of individual colors,

  • 5:43

    the RGBa function would work here as well.

  • 5:47

    [?upbeat music?] [Think Vitamin Membership]

  • 5:50


Show full transcript