Lineare Farbverläufe

Beispiele

Linearer Verlauf mit 3 Farbwerten

Linearer Verlauf mit 3 Farbwerten

Linearer Verlauf mit 3 Farbwerten

Code Beispiel 1

#main .ce_text.gradient
{
background: rgb(214,112,11);
background: -moz-linear-gradient(top, rgba(214,112,11,1) 0%, rgba(224,160,100,1) 29%, rgba(155,79,7,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,112,11,1)), color-stop(29%,rgba(224,160,100,1)), color-stop(100%,rgba(155,79,7,1)));
background: -webkit-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 29%,rgba(155,79,7,1) 100%);
background: -o-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 29%,rgba(155,79,7,1) 100%);
background: -ms-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 29%,rgba(155,79,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6700B', endColorstr='#9B4F07',GradientType=0 );
background: linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 29%,rgba(155,79,7,1) 100%);
}

Code Beispiel 2

#main .ce_text.gradient
{
background: rgb(214,112,11);
background: -moz-linear-gradient(top, rgba(214,112,11,1) 0%, rgba(224,160,100,1) 20%, rgba(224,160,100,1) 82%, rgba(155,79,7,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,112,11,1)), color-stop(20%,rgba(224,160,100,1)), color-stop(82%,rgba(224,160,100,1)), color-stop(100%,rgba(155,79,7,1)));
background: -webkit-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 20%,rgba(224,160,100,1) 82%,rgba(155,79,7,1) 100%);
background: -o-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 20%,rgba(224,160,100,1) 82%,rgba(155,79,7,1) 100%);
background: -ms-linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 20%,rgba(224,160,100,1) 82%,rgba(155,79,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6700B', endColorstr='#9B4F07',GradientType=0 );
background: linear-gradient(top, rgba(214,112,11,1) 0%,rgba(224,160,100,1) 20%,rgba(224,160,100,1) 82%,rgba(155,79,7,1) 100%);
}

Code Beispiel 3

#main .ce_text.gradient
{
background: rgb(254,204,177);
background: -moz-linear-gradient(left, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1)));
background: -webkit-linear-gradient(left, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%);
background: -o-linear-gradient(left, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%);
background: -ms-linear-gradient(left, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 );
background: linear-gradient(left, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%);
}

Der Grundaufbau der Verlaufsdefinitionen (nach W3C):
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Für die Gecko-Browser (Firefox):
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Für die Webkit-Browser (Chrome, Safari):
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

nach oben