استفاده از چندین رنگ
مثال زیر، نحوه استفاده از چندین رنگ را نشان می دهد:
مثال (استفاده از چندین رنگ در شیب رنگ)
یک شیب رنگ از بالا به پایین با چندین رنگ:
#grad
{
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
خودتان امتحان کنید »{
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
مثال زیر، نحوه ایجاد یک شیب رنگ خطی با رنگ های رنگین کمان را نشان می دهد:
مثال (استفاده از چندین رنگ در شیب رنگ)
#grad
{
/* For Safari */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
خودتان امتحان کنید »{
/* For Safari */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}