Unterschiede zwischen Prozent- und Pixelwerten zur Positionierung von color stops in linearen Verläufen

Pixelwerte to the rescue!

Verlauf-Eigenschaft mit Prozentwerten

Beispiel-Verlauf

Css

.gradient-percent {
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);
}

Verlauf-Eigenschaft mit Pixelwerten

Beispiel-Verlauf

Css

.gradient-px {
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);
}