Using CSS for Gradients in Backgrounds

Gradients may be used in backgrounds via CSS. This is not available by CSS in all browsers, but, the feature is coming along. Even browsers that support gradients may have some holes in their functionality. This feature is defined in CSS3, use it and include fallback handling. Though the CSS3 version is not supported by all new browsers, it will be available soon. It has been available for webkit, opera, mos, and ms for some time, at least to some level. The following explains how the gradient can be used reasonably reliable across browsers. While the oldest Safari and Chrome syntax is shown in the cross browser samples, they are very different format from the current CSS3 syntax. That will be used, but, not discussed here. Meanwhile the new Mozilla, and the more recent webkit, mos and ms are very similar in format to the CSS3 syntax, and will be discussed below.

Plan for the following format in the future:

linear-gradient (angleOrlocation, stop1 [%], stop2 [%], [stop3 [%], […]]])

angleOrlocation – This indicates the location/direction that the gradient will go. The value may be:
- Defined in degrees, such as 30degree, or 190deg
- Listed as {top, bottom, left, right, top left, top right, bottom left, bottom right, circle}, indicating where the gradient starts. Top would result in vertical gradient from top to bottom. Left would result in horizontal running left to right
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band.
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.

Note: In the previous discussion, I refer to the positioning of the color by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …

radial-gradient([% %,] [type,] [size,] stop1 [%], stop2 [%], [stop3 [%], […]]])

[% %] – this is the location of the center of the shape, such as 80% 20%. If this field is not present, the shape is centered in the DIV.
type – identify if the shape will be {circle, ellipse }. If this field is not present, ellipse is used
size – the size is specified relative to { closest-side, farthest-side, closest-corner, farthest-corner, contain, cover }
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.

Note: In the previous discussion, I refer to the positioning of the color and center by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …

Using CSS to create a Horizontal Gradient Background on a DIV

CSSSample


  .horizontal-grad {
    /* fallback */
    background-color: #1a82f7 url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/horizontal-gradient.jpg) repeat-y ; 
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, left top, right top,
        from(#ff661c), to(#ffb61d)); 
    /* Safari 5.1, Chrome 10+ */	
    background: -webkit-linear-gradient(left, #ff661c, #ffb61d); 
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(left, #ff661c, #ffb61d);
    /* IE 10 */
    background: -ms-linear-gradient(left, #ff661c, #ffb61d);
    /* Opera 11.10+ */
    background: -o-linear-gradient(left, #ff661c, #ffb61d);
    /* CSS3 */    
    background: linear-gradient(left, #ff661c,  #ffb61d) ;
  }

Using CSS to Create a Vertical Gradient on a DIV

CSSSample


.vertical-grad {
  /* fallback */
  background: #1a82f7  url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/vertical-gradient.jpg)  repeat-x ;
  /* Safari 4-5, Chrome 1-9 */  
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
      from(#ff661c), to(#ffb61d));
  /* Safari 5.1, Chrome 10+ */	       
  background: -webkit-linear-gradient(top, #ff661c, #ffb61d);
  /* Firefox 3.6+ */  
  background: -moz-linear-gradient(top, #ff661c, #ffb61d);
  /* IE 10 */  
  background: -ms-linear-gradient(top, #ff661c, #ffb61d);
  /* Opera 11.10+ */  
  background: -o-linear-gradient(top, #ff661c, #ffb61d);
  /* CSS3 */
  background: linear-gradient(top, #ff661c,  #ffb61d) ;       
}

Using CSS to Include Multiple Band Gradients on a DIV

CSSSample


.multicolor-grad {
  background: #1a82f7  url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/multiple-bands.jpg)  repeat-y ;
  /* For Safari */
  background: -webkit-linear-gradient(#ff661c, #ffb61d, #ffffff);
   /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(#ff661c, #ffb61d, #ffffff);
  /* For Firefox 3.6 to 15 */
  background: -moz-linear-gradient(#ff661c, #ffb61d, #ffffff);
  /* CSS3 */
  background: linear-gradient(#ff661c, #ffb61d, #ffffff); 
}

Using CSS to Create an Even Stop Gradient on a DIV

If you would like an even stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.

CSSSample


.even-stops {
    /* fallback */
    background: #1a82f7  url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/even-bands.jpg)  repeat-x ;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, left top, right top,
      from(#ff661c), 
      color-stop(0.25, #ffb61d), color-stop(0.5, #ff661c),
      color-stop(0.75, #ffb61d), to(#ff661c));
    /* Safari 5.1+, Chrome 10+ */  
    background: -webkit-linear-gradient(left,
      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c); 
    /* Firefox 3.6+ */  
    background: -moz-linear-gradient(left,
      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);
    /* IE 10 */  
    background: -ms-linear-gradient(left,
      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);
    /* Opera 11.10+ */  
    background: -o-linear-gradient(left,
      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);
    /* CSS3 */
    background: linear-gradient(left,
      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c) ;    
  }

Using CSS to Create an arbitrary Stop Gradient on a DIV

If you would like an arbitrary stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.

CSSSample


  .arbitrary-stops {
    /* fallback */
    background: #1a82f7  url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/positioned-bands.jpg)  repeat-y ;
    /* Safari 4-5, Chrome 1-9 */  
    background: -webkit-gradient(linear, left top, right top, from(#ff661c), 
      color-stop(0.05, #ffb61d), color-stop(0.5, #ff661c),
      color-stop(0.95, #ffb61d), to(#2F2727));
    /* Safari 5.1+, Chrome 10+ */  
    background: -webkit-linear-gradient(left,
      #ff661c, #ffb61d 5%, #ff661c,#ffb61d 95%,#ff661c);
    /* Firefox 3.6+ */  
    background: -moz-linear-gradient(left,
      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);
    /* IE 10 */  
    background: -ms-linear-gradient(left,
      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);
    /* Opera 11.10+ */  
    background: -o-linear-gradient(left,
      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);
    /* CSS3 */
    background: linear-gradient(left,
      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c) ; 
  }

Notice the use of 5% and 95% to affect the location at which the color band is to start, and therefore affects the width of the transition bands.

Using CSS to Create a Diagonal Gradient on a DIV

If you would like a diagonal gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.

CSSSample


  .diagonal-grad {
    /* For Safari */
    background: -webkit-linear-gradient(left top, #ffb61d,#ff661c);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(bottom right, #ffb61d,#ff661c);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(bottom right, #ffb61d,#ff661c);
    /* CSS3 */
    background: linear-gradient(bottom right, #ffb61d,#ff661c); 
}

Notice: To go from top left to bottom right, the standard requires the specification of the end location, bottom right. Safari (webkit) reverses the logic of the location to specify in the first parameter. Webkit expects the use of the begin point of the diagonal. If you want to go from top left to bottom right, specify top left.

Using CSS to Create an Angled Gradient on a DIV

If you would like a gradient at a specific angle on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.

CSSSample



  .angled-grad {
    /* For Safari */
    background: -webkit-linear-gradient(30deg, #ffb61d, #ff661c);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(30deg, #ffb61d, #ff661c);
    /* For Firefox 3.6 to 15 */ 
    background: -moz-linear-gradient(30deg, #ffb61d, #ff661c);
    /* CSS3 */
    background: linear-gradient(30deg, #ffb61d, #ff661c); 
  }

Using CSS to Create a Radial Gradient on a DIV

CSSSample


  .radial-center {
    /* fallback */
    background: #2F2727 url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/Radial.jpg) center center no-repeat;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 360, 
      from(#ffec1d), to(#ff661c)) ;
    /* Safari 5.1+, Chrome 10+ */  
    background: -webkit-radial-gradient(circle,
      #ffec1d,  #ff661c);
    /* Firefox  */   
    background: -moz-radial-gradient(circle, #ffed1d,  #ff661c);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #ffec1d,  #ff661c);
    /* CSS3 */
    background: radial-gradient(circle, #ffec1d,  #ff661c); 
    /* Opera couldn't do radial gradients, then at some point
       they started supporting the -webkit- syntax, how it kinda
       does but it's kinda broken (doesn't do sizing) */
}

Notice: for circular gradients, the first parameter is replace with the value circle. You may use the percent on the color bands to position from the center of the circle.

Using CSS to Create a Positioned Radial Gradient on a DIV

If you would like a positioned radial gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.

CSSSample


  .radial-position {
    /* fallback */
    background: #2F2727 url(http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/positioned-radial.jpg) center center no-repeat;
     /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100,
      from(#ffec1d), to(#ffb61d));
    /* Safari 5.1+, Chrome 10+ */  
    background: -webkit-radial-gradient(80% 20%, closest-corner,
      #ffec1d,  #ff661c);
    /* Firefox 3.6+ */  
    background: -moz-radial-gradient(80% 20%, closest-corner,
      #ffec1d,  #ff661c); 
     /* IE 10 */  
    background: -ms-radial-gradient(80% 20%, closest-corner,
      #ffec1d,  #ff661c);
    /* CSS3 */  
    background: radial-gradient(80% 20%, closest-corner,
      #ffec1d,  #ff661c); 

  /* Opera cannot do radial gradients yet */
}

Create a Rounded Corner on a DIV

If you would like to create rounded corners on a div, account for old and new browsers. Most new browsers will recognize rounded corners, available with CSS3. However, browsers not recognizing CSS3 may appreciate -mos, -webkit and -khtml variations.

CSSSample


.rounded {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
}

In each case, there is 1 parameter to the border radius declaration. That is:

param 1: The corner radius.

Create Selected Rounded Corners

If you would like to create rounded corners on selected corners, there is an option to handle this situation. This is available in CSS3, and special case options for -moz and -webkit browsers.

CSSSample


.rounding { 
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 40px ;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 30px;
  -webkit-border-bottom-left-radius: 40px ;

  border-top-left-radius: 10px;
  border-top-right-radius: 20px ;
  border-bottom-left-radius: 30px ;
  border-bottom-right-radius: 40px ;
}

The parameters are the same as the standard border radius, but affects only the selected corner.”

Advanced Web Help

What you need to know

Category Archives: CSS

CSS3 Background Gradients

Using CSS for Gradients in Backgrounds

Using CSS to create a Horizontal Gradient Background on a DIV

Using CSS to Create a Vertical Gradient on a DIV

Using CSS to Include Multiple Band Gradients on a DIV

Using CSS to Create an Even Stop Gradient on a DIV

Using CSS to Create an arbitrary Stop Gradient on a DIV

Using CSS to Create a Diagonal Gradient on a DIV

Using CSS to Create an Angled Gradient on a DIV

Using CSS to Create a Radial Gradient on a DIV

Using CSS to Create a Positioned Radial Gradient on a DIV

How can I use CSS:before to add new line

CSS Elliptical Corners

Create Elliptical Corners on a DIV

Create Selected Elliptical Corners

CSS Rounded Corners

Create a Rounded Corner on a DIV

Create Selected Rounded Corners

CSS Box Shadow

Create a Drop Shadow

Create an Inner Shadow