Mastering CSS Gradients in Under an Hour

Posted in , • 381 days ago • Written by • 9 Comments

Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?

Well, it’s time to kill those 1px wide images, my friend.

If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.

Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.

So, let’s rock!

Basic syntax

The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, we have at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!).

We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).

This is the basic syntax:

#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** real example **/

background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );

background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );

background: -o-linear-gradient( top left, red, #c10000, #ae0000 );

background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );

background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );

background: linear-gradient( top left, red, #c10000, #ae0000 );
}

This CSS will get this result:

Mastering CSS Gradients in Under an Hour

So, here are the items explained:

  • Background: Just like you set background image or colors you’ll set gradients as a separate item
  • vendor -: We can use “-o” for opera, “-moz” for Firefox, “-webkit” for safari and chrome, “-khtml” for Konqueror and “-ms” for IE
  • type: Here we can use “linear” or “radial”
  • start / position: This is a X/Y coordinate which tells the browser either the direction (top means that it’ll be top to bottom, and left that it’ll be left to right) or the exact start point (like 600px 300px will invert the example above because the start point will be the bottom right)
  • shape: If you use radial gradient you can set it as “circle” or leave it blank so the gradient will be ellipsis-shaped
  • size: If you are using radial gradients you can set where the gradient extends to. You can use: closest-side,  closest-corner, farthest-side, farthest-corner, contain, cover to set the gradient position.
  • Color1: This is the first color. It’ll be the color in the start point you set above
  • Colors 2,3,4..: You can add as many colors as you want and they’ll be evenly distributed in the element’s background unless you declare a position.
  • Position (for colors): If you don’t want an even distribution you can add your own rules for positioning colors.

Here is an example making use of color positions:


#wd {

background: -moz-linear-gradient( top left, white, black 25% );

background: -webkit-linear-gradient( top left, white, black 25% );

background: -o-linear-gradient( top left, white, black 25% );

background: -khtml-linear-gradient( top left, white, black 25% );

background: -ms-linear-gradient( top left, white, black 25% );

background: linear-gradient( top left, white, black 25% );
}

You can see the result and an outlined area, about those 25% / 75% portions so you can have a better idea on how the browser calculates those values:

Mastering CSS Gradients in Under an Hour

Multiple gradients

Let’s dig a little deeper and see more cool stuff you can do. You can start doing advanced stuff and playing with shape combinations to create new effects.

The syntax is pretty simple, all you’ve got to do is separate multiple declarations with commas. Notice that the “z-index” of the gradients will be reversed and the first item will be at the top.

If you set the color to transparent, you can use a background color if you want. Otherwise the color of the top element will hide all the others.

Ok, let’s play with some code now:


#wd {

background:

-moz-linear-gradient( top left, white, transparent 25% ),

-moz-linear-gradient( bottom right, white, transparent 25% ),

-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-webkit-linear-gradient( top left, white, transparent 25% ),

-webkit-linear-gradient( bottom right, white, transparent 25% ),

-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-o-linear-gradient( top left, white, transparent 25% ),

-o-linear-gradient( bottom right, white, transparent 25% ),

-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-khtml-linear-gradient( top left, white, transparent 25% ),

-khtml-linear-gradient( bottom right, white, transparent 25% ),

-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-ms-linear-gradient( top left, white, transparent 25% ),

-ms-linear-gradient( bottom right, white, transparent 25% ),

-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

linear-gradient( top left, white, transparent 25% ),

linear-gradient( bottom right, white, transparent 25% ),

radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;            }

And this will be your final result:

Cool Effects

As you can see, gradients combinations can lead to awesome results. Here we’ll see a few practical (ok, some of them quite experimental) examples that you can use and even make them better.

Subtle lighting effect

This effect is pretty easy to use, especially for featured images. It gives a subtle elliptical shadow for your elements without additional markup, you can just include it in your images. Oh, and it works pretty well for hovers also.

Here is the CSS to achieve the effect (and also correct positioning for elements):


img {

margin: 0 -60px;

padding: 25px 60px 40px;

background: -moz-radial-gradient( center center, contain, black, white 90% );

background: -webkit-radial-gradient( center center, contain, black, white 90% );

background: -o-radial-gradient( center center, contain, black, white 90% );

background: -khtml-radial-gradient( center center, contain, black, white 90% );

background: -ms-radial-gradient( center center, contain, black, white 90% );

background: radial-gradient( center center, contain, black, white 90% );
}

And this is the effect applied to one o four images:

CSS Background Patterns

There are quite a few highly experimental CSS patterns out there, but there are a few that you can actually use, especially the ones which rely on gradients that end smoothly.

Here is an example on how to apply a subtle background pattern that you can easily integrate in your site:


body {

background:

-moz-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-webkit-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-o-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-khtml-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-ms-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

radial-gradient( center center, contain, #757575, transparent ),

black;
}

And this will be the rendered result:

It’ll Blow your mind – CSS Painting

If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.

Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.

Here is the code I used to do a simple scared face to show to your IE users:


#wd {

position: relative;

width: 450px;

height: 400px;

margin: 20px auto;

background:

-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

border-radius: 50%;

}

#wd:after {

content: "Are you using IE??";

position: absolute;

top: 225px;

left: 315px;

padding: 5px 10px;

width: 150px;

font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */

background: white;

border: 2px solid #E19B92;

border-radius: 4px 4px 4px 4px;

}

And this is the rendered result:

Compatibility notes

There are 2 important final notes on this. First is on old Webkit rules (which still in use for many old versions including mobile). They are slightly different than the ones presented here:

#wd {

background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );

/* example */

background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}

And we have also Microsoft filters for IE. They are better explained in this Microsoft’s guide.

So, what do you think about it?

Can you think of new uses for those CSS gradients? Let us know using the comments section!

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

43 Written Articles • • Website • Google+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

9 Comments Best Comments First
  • Leo

    Thursday, May 10th, 2012 04:14

    1

    Thanks for the tutorial, I have only ever used generators to create css gradients, but from now on ill be looking to hand write mine!, thanks for the help! Love the background patterns!

    0
  • Piadas

    Thursday, May 10th, 2012 18:19

    4

    Nice, i liked very much this site! :D Great designs! :D

    0
  • Harian Post

    Thursday, May 10th, 2012 11:44

    3

    Wow! Great tutorial 1stwebdesigner…

    I love to learn CSS because CSS can make my blog beautiful and unique from the others. From now, I must start collect all the CSS tutorial on the web. Thanks again

    -HarianPost (Malaysia)

    0
  • Gunnar Bittersmann

    Thursday, May 10th, 2012 05:04

    2

    You got the basic syntax for linear gradients wrong. To conform to the specification, the unprefixed value must not specify the starting corner, but the ending point. (This has been changed in the 2011-09-08 working draft.)
    Note the difference between corner and point. According to the spec, the gradient line uses “magic corners”. See Eric Meyer’s article.
    Firefox has already implemented the spec-conform syntax with magic corners.

    0
  • Ryan

    Thursday, May 10th, 2012 18:41

    5

    Awesome post! Took me a while to get the grasp of things when CSS3 gradients were introduced!

    0
  • Nanang Gunawan

    Sunday, May 13th, 2012 03:19

    6

    Great CSS tutorial :)
    New Gradient Technic from 1stwebdesigner.

    0
  • Prerak Trivedi

    Sunday, August 5th, 2012 15:26

    9

    Playing with these stuffs right now! Thanks for your detailed article, Rochester Oliveira!

    0
  • Jamshed Khan

    Monday, June 11th, 2012 01:42

    8

    This is really good help of gradients many thanks!

    :)

    0
  • Eddie

    Sunday, May 13th, 2012 05:55

    7

    I searched on google 1 day until I found this post, great, great CSS tutorial, thanks for share Rochester Oliveira!

    0
  • Prerak Trivedi

    Sunday, August 5th, 2012 15:26

    9

    Playing with these stuffs right now! Thanks for your detailed article, Rochester Oliveira!

    0
  • Jamshed Khan

    Monday, June 11th, 2012 01:42

    8

    This is really good help of gradients many thanks!

    :)

    0
  • Eddie

    Sunday, May 13th, 2012 05:55

    7

    I searched on google 1 day until I found this post, great, great CSS tutorial, thanks for share Rochester Oliveira!

    0
  • Nanang Gunawan

    Sunday, May 13th, 2012 03:19

    6

    Great CSS tutorial :)
    New Gradient Technic from 1stwebdesigner.

    0
  • Ryan

    Thursday, May 10th, 2012 18:41

    5

    Awesome post! Took me a while to get the grasp of things when CSS3 gradients were introduced!

    0
  • Piadas

    Thursday, May 10th, 2012 18:19

    4

    Nice, i liked very much this site! :D Great designs! :D

    0
  • Harian Post

    Thursday, May 10th, 2012 11:44

    3

    Wow! Great tutorial 1stwebdesigner…

    I love to learn CSS because CSS can make my blog beautiful and unique from the others. From now, I must start collect all the CSS tutorial on the web. Thanks again

    -HarianPost (Malaysia)

    0
  • Gunnar Bittersmann

    Thursday, May 10th, 2012 05:04

    2

    You got the basic syntax for linear gradients wrong. To conform to the specification, the unprefixed value must not specify the starting corner, but the ending point. (This has been changed in the 2011-09-08 working draft.)
    Note the difference between corner and point. According to the spec, the gradient line uses “magic corners”. See Eric Meyer’s article.
    Firefox has already implemented the spec-conform syntax with magic corners.

    0
  • Leo

    Thursday, May 10th, 2012 04:14

    1

    Thanks for the tutorial, I have only ever used generators to create css gradients, but from now on ill be looking to hand write mine!, thanks for the help! Love the background patterns!

    0

Comments are closed.

x

Do You Know How To Freelance And Get More Clients?

E-Book

If not, then it's time to learn how to:

  • Start as web design freelancer for dream lifestyle!
  • Design beautiful designs your clients will love!
  • Get your first clients and get more clients!

You can trust 1stWebDesigner to help you become a better web designer!

- Jacob Cass | Just Creative

Just enter your name and email below and click Get Updates!

unknown - unknown - US