Quick Tip: Understanding CSS3 Gradients


Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we'll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.


While Mozilla and Webkit generally adopt the same syntax for CSS3 properties, they unfortunately don't quite agree when it comes to gradients. Webkit was first to embrace gradients, and uses the following structure:

/* Syntax, taken from: */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* In practice... */ 
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

Don't worry if your eyes gloss over at that syntax; mine did too! Just note that we require a comma-separated list of parameters.

  • What type of gradient? (linear)
  • X and Y axis coordinates of where to begin. (0 0 - or left-top corner)
  • X and Y axis coordinates of where to conclude (0 100% - or left-bottom corner)
  • What color to begin with? (from(red))
  • What color to conclude with? (to(blue))


Firefox, which implemented gradient support with version 3.6, prefers a slightly different syntax.

/* Syntax, taken from: */
 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

/* In Practice */
background: -moz-linear-gradient(top, red, blue);
  • Note how we've placed the type of gradient, linear, within the vendor extension.
  • Where should the gradient begin? (top - we could also pass in degrees, as in -45deg)
  • What color to start with? (red)
  • What color to conclude with? (blue)


What if you don't need a 100% gradient from one color to another? This is where color stops come into play. A common design technique is to apply a short and subtle gradient, like this:

Subtle Gradients

Note the subtle off-white to white gradient at the top.

In the past, the standard implementation was to create an image, set it as the background of an element, and set it to repeat horizontally. However, with CSS3, this is a cinch.

background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

This time, we set the gradient to conclude at 8%, rather than 100%, which is the default. Note that we're also applying a border top to add contrast; this is very common.

If we wish to add a third (or Nth) color, we can do:

background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
  • With the -moz version, we designate that, at 20% of the element height, we should now be at the color red.
  • For -webkit, we use color-stop, and pass in two parameters: where the stop should occur, and what the color should be.

Important Notes About CSS Gradients

  • Use them as much as you can. If it's okay to let IE users see a solid color, I encourage you to use this method.
  • IE6/7/8, Opera, Safari 3, and Firefox 3 cannot render CSS3 gradients. Firefox and Safari users generally upgrade often, so that's not as big of a deal.
  • Always apply a default, solid color, background for browsers that won't understand the vendor prefixes.
  • Never use a red to blue gradient, as I did for the examples.
  • Webpages don't need to look the same in every browser! :)

Thanks for reading/watching!

Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Code
    HTML5: Vibration APIPdl54 preview image@2x
    HTML5 has been a breath of fresh air for the web, which hasn't only affected the web as we know it. HTML5 provides a number of APIs that enable developers to create interactive websites and improve the user experience on mobile devices. In this article, we'll take a closer look at the Vibration API.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin: The Login ScreenCustomize wordpress admin rachel 400
    The WordPress login screen is well designed - it's clean and simple to interact with and it works well on all screen sizes. But what if you're building a site for a client who wants to display their own logo to users logging in? Or if you have a MultiSite installation and want your users to see your branding when they log in? Luckily, you can customise the way the login screen looks quite easily. For this tutorial I've created a plugin to do this; the advantage of using a plugin is that you can drop it into any WordPress sites you develop and instantly give them some branding.Read More…