This is the best online Gradient Background Maker I've seen to-date. It will create cross-browser compatible CSS for a gradient background that you can add to most any CSS element.

For example, if you want to add a gradient background to the body tag of your HTML:

Go here to create the CSS for your gradient background:

  • CSS Gradient Background Maker
  • Add your colors and gradient direction preferences.
  • Copy/Grab the CSS Markup Code created by the Gradient Background Maker.
  • Add body to beginning of your code like in the following example. Be sure to end your code with a closing right curly bracket - - just like I have in the code below.
  • Add the CSS to your website. For Ning Networks, add to your Advanced CSS.

 

body {
/* IE10 */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);

/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #55D3E6));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);

/* Proposed W3C Markup */
background-image: linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);
}

 

As per usual, it won't work as well in IE below IE10.

Views: 1106

Replies to This Discussion

That's really nice, a lot easier than the way I made mine.
I prefer this one, feels like photoshop

Ultimate CSS Gradient Generator

RSS

Members

Discussion Forum

Ning 3.0 vs. Grou.ps for a brand new community

Started by Rodney Cummins. Last reply by Rodney Cummins Jul 22, 2013. 2 Replies

Suggestion for Jensocial

Started by Bernard Lama. Last reply by JenSocial Jun 3, 2012. 1 Reply

Scheduling background changes

Started by Mind's Eye. Last reply by Mind's Eye Feb 29, 2012. 1 Reply

Home
VIP Ning Tips