Gradientz :: jQuery plugin

The following gradients were rendered by your browser. No images!

        $('#box1').gradientz({
          start: "#fcc",
          end: "yellow"
        })
        

        $('#box2').gradientz({
          angle: 90,
          start: "#008",
          end: "#08f"
        })
      
      

        $('#box3').gradientz({
          angle: 45,
          start: "#008",
          end: "red"
        })
      

More examples

Usage

        $(selector).gradientz({
          start: "red",     // start color: default is the background color
          end: "blue",      // end color: default is the background color.
          distance: 100,    // size: default is width/height depending on size
          angle: 72,         // angle from vertical. Default is 0, i.e. vertical.
          css: "right: 0px" // additional CSS: default is "top: 0px; left: 0px"
        })
      

Notes

• Using VML in IE and canvas in Firefox, Webkit. Should render identically
• Cross Browser: Tested on FF3, IE6, IE7, Safari
• Fast: this page renders in 16ms on Firefox on my iMac
• No need for excanvas
• Small: 2.2k uncompressed.
• Angles are valid -90 < angle < 90
• +ve angles draw from top left and -ve angles draw from top right
• Should play nicely with Cornerz
• Download here (current version: 0.4)