Degrees counting different in webkit

README.md

@@ -113,6 +113,7 @@ See http://caniuse.com/#feat=css-gradients for more details on css gradients.
 
 Lessons Learnd
 --------------
+###Transparency in Firefox
 Firefox renders transparency in gradients different than webkit. The trick is to not use `transparent` or `rgba(0,0,0,0)` but the first color with alpha transparency = 0. 
 ```css
 /* This fades to gray first before fading to transparent. */
@@ -124,7 +125,17 @@ div.color {
     background: linear-gradient(0deg,  hsla(0,100%,50%,1) 0%, hsla(0,100%,50%,0) 100%);
 }
 ```
-Open [this fiddle](http://jsfiddle.net/WebCore_IT/jj8z49eb/) in Firefox to see the difference.
+Open [this fiddle](http://jsfiddle.net/WebCore_IT/jj8z49eb/) in Firefox16+ to see the difference.
+
+
+###Degrees counting in webkit
+* Prefixed `-webkit-linear-gradient` is counting degrees **counterclockwise**. 0° is at the **left side**.
+* The standard `linear-gradient` is counting degrees **clockwise**. 0° is at the **bottom side**.
+
+To convert the degrees of the standard linear-gradient to the -webkit-prefix degrees: (360 - standard-degrees) + 90
+
+Open [this fiddle](http://jsfiddle.net/WebCore_IT/666datts/) in Chrome 26+ (or Safari 6.1+) to see the difference.
+
 
 License
 -----

dist/colorful-background-css-generator.js

@@ -170,7 +170,7 @@ ColorfulBackgroundLayer.prototype.getCSSProperty = function(endingWithSemicolon,
 		output = prefix;
 	}
 	var hslColor = this.hue + ", " + this.saturation + "%, " + this.lightness + "%";
-	output = output + "linear-gradient(" + this.degree + "deg, hsla(" + hslColor + ", 1) " + this.positionColor + "%, hsla(" + hslColor + ", 0) " + this.positionTransparency + "%)";
+	output = output + "linear-gradient(" + this.getDegreeForVendor(prefix) + "deg, hsla(" + hslColor + ", 1) " + this.positionColor + "%, hsla(" + hslColor + ", 0) " + this.positionTransparency + "%)";
 
 	if (endingWithSemicolon === undefined || endingWithSemicolon === false) {
 		output = output + ",\n\t\t";
@@ -179,4 +179,27 @@ ColorfulBackgroundLayer.prototype.getCSSProperty = function(endingWithSemicolon,
 	}
 
 	return output;
+};
+/**
+ * Returns the degrees for the given vendor prefix. 
+ *
+ * - Prefixed `-webkit-linear-gradient` is counting degrees counterclockwise. 0° is at the left side.
+ * - The standard `linear-gradient` is counting degrees clockwise. 0° is at the bottom side.
+ * 
+ * @param  {String} prefix
+ * @return {String}
+ */
+ColorfulBackgroundLayer.prototype.getDegreeForVendor = function(prefix) {
+	// -webkit-linear-gradient is counting degrees counterclockwise. 0° is at the left side.
+	if (prefix === "-webkit-") {
+		var convertedDegree = (360 - parseInt(this.degree)) + 90;
+		if(convertedDegree >= 360){
+			convertedDegree -= 360;
+		}
+		return convertedDegree;
+	}
+
+	// linear-gradient is counting degrees clockwise. 0° is at the bottom side.
+	// (prefix === undefined)
+	return this.degree;	
 };