Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos | Gradients

CSS3 Gradients

While it's always been possible to give objects a solid background colour, until recently you had to create an image if you wanted to use a gradient instead, adding time and, more importantly, size to your project. Thankfully gradients can be quickly added using CSS3's gradient property.

Basic Syntax

Linear Gradient - top to bottom
background: linear-gradient (top, <top colour>, <bottom colour> start) ;

Linear Gradient - left to right
background: linear-gradient (left, <left colour>, <right colour> start) ;

Radial Gradient
background: radial-gradient(position, size and shape, colour stops);

Examples and Code

Linear - Top To Bottom

linear-gradient- top to bottom

CSS

  • .vertical{
    background: -webkit-linear-gradient (#3a0c33, #8568e1);
    background: -moz-linear-gradient (#3a0c33, #8568e1);
    background: -o-linear-gradient (#3a0c33, #8568e1);
    background: linear-gradient (#3a0c33, #8568e1);
    -pie-background: linear-gradient (#3a0c33, #8568e1);
    behavior: url(assets/pie/PIE.htc);
    position:relative; /*required to make PIE work*/
    }

Linear - Left to Right

linear-gradient - left to right

CSS

  • .horizontal{
  • background: -webkit-linear-gradient (left, #3a0c33, #8568e1);
  • background: -moz-linear-gradient (left, #3a0c33, #8568e1);
  • background: -o-linear-gradient (left, #3a0c33, #8568e1);
  • background: linear-gradient (left, #3a0c33, #8568e1);
  • -pie-background: linear-gradient (left, #3a0c33, #8568e1);
  • behavior: url(assets/pie/PIE.htc);
  • position:relative; /*required to make PIE work*/
  • }

Linear - With A Stop

Linear gradient with a stop

CSS

  • .stop{
  • background: -webkit-linear-gradient (top, #3a0c33, #6fbbbc 200px, #e6eff3 250px);
  • background: -moz-linear-gradient (top, #3a0c33, #6fbbbc 200px, #e6eff3 250px);
  • background: -o-linear-gradient (top, #3a0c33, #6fbbbc 200px, #e6eff3 250px);
  • background: linear-gradient (top, #3a0c33, #6fbbbc 200px, #e6eff3 250px);
  • -pie-background: linear-gradient (top, #3a0c33, #6fbbbc 200px, #e6eff3 250px);
  • behavior: url(assets/pie/PIE.htc);
  • position:relative; /*required to make PIE work*/
    }

Linear - Diagonal Repeating

Diagonal repeating gradient
repeating gradients aren't supported by Internet Explorer 9 or earlier

CSS

  • .diagonal{
  • background: -moz-repeating-linear-gradient (-45deg, #3a0c33 0, #5b45a2 10%, #8568e1 25%);
  • background: -webkit-repeating-linear-gradient (-45deg, #3a0c33 0, #5b45a2 10%, #8568e1 25%);
  • background: -o-repeating-linear-gradient (-45deg, #3a0c33 0, #5b45a2 10%, #8568e1 25%);
  • -pie-background: linear-gradient (-45deg, #3a0c33 0, #5b45a2 50%, #8568e1 0); /*repeating gradients aren't supported by IE9 therefore move the gradient to 50% to give just one diagonal line*/
  • behavior: url(assets/pie/PIE.htc);
  • position:relative; /*required to make PIE work*/
  • }

Radial Gradients

Radial gradient - no support in Internet Explorer which will just show the background as the colour of the first gradient (in this case a dark purple)

CSS

  • .radial{
  • background: -moz-radial-gradient (50% 50%, circle, #3a0c33 40px, #5f46af 80px, #8568e1 120px, #785fc9 160px );
  • background: -webkit-radial-gradient (50% 50%, circle, #3a0c33 40px, #5f46af 80px, #8568e1 120px, #785fc9 160px);
  • background: -o-radial-gradient (50% 50%, circle, #3a0c33 40px, #5f46af 80px, #8568e1 120px, #785fc9 160px);
  • }
  • Break down of the above...
    50% 50% - the position of the gradient
    circle - the shape
    #3a0c33 40px - the colour and size of the first (inner) gradient
    #5f46af 80px - colour and size of the second gradient
    #8568e1 120px - color and size of the third gradient
    #785fc9 160px - colour and size of the fourth (outer) gradient. If you want the circle to have have a transparent background then this colour should be the same as the container element's background.

Browser Support and prefixes

Support

  • Opera -- support since version 11.1 with the -o- prefix
  • Firefox -- support since version 3.6 with the -moz- prefix
  • Chrome -- support since version 4.0 with the -webkit- prefix
  • Safari -- support since version 4.0 with the -webkit- prefix
  • Internet Explorer...
       IE9 and earlier -- require CSS3Pie

Prefixes

  • Linear Gradients
  • Opera: background:-o-linear-gradient (position,<second colour> start, <next colour> start);
  • Firefox: background:-moz-linear-gradient (position, <first colour><second colour> start, <next colour> start);
  • Chrome and Safari: background:-webkit-linear-gradient (position, <first colour><second colour> start, <next colour> start);
  • Internet Explorer 9 and earlier: -pie-background:linear-gradient (<first colour>start, <next colour> start);
    behavior: url (path/to/PIE.htc);
  • Radial Gradients
  • Opera: background: -o-radial-gradient (position, size and shape, colour stops);
  • Firefox: background:-moz-radial-gradient (position, size and shape, colour stops);
  • Chrome and Safari: background:-webkit-radial-gradient (position, size and shape, colour stops);
  • Internet Explorer 9 and earlier: no support even with CSS3Pie

More CSS3 Demos This Way