אם פעם כל אלמנט שהיה עם מעבר צבע (Gradient) היה מחייב אותנו ליצור תמונה שתופסת משקל מיותר, אז שדווקא די מזמן אפשרי כבר ליצור מעברי צבע יפים ומגוונים מאוד בעזרת CSS בלבד.

הניסוח הוא מאוד פשוט וברור, הדבר היחיד שעשוי לבלבל הוא הניסוח השונה לכל דפדפן בנפרד.

בואו נתחיל לעבור על הסוגים של מעברי הצבע: (שימו לב להערות שמסבירות את הניסוח לכל דפדפן בנפרד)

div {
  background: -webkit-linear-gradient(#050831, #f1c89c);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#050831, #f1c89c);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#050831, #f1c89c);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#050831, #f1c89c);  /* Standard syntax */
}
 

ברירת המחדל תהיה מעבר צבע מלמעלה למטה, כאשר בקוד נכתוב קודם את הצבע העליון ואז את התחתון.

כמובן שנוכל להשתמש בקוד צבע בצורת HEX כמו כאן או במילים כמו green, red, blue, black וכו'... ואפילו עם קוד RGB או RGBA עם שקיפות של אלפא.

דבר נוסף שנוכל לעשות הוא לשלב יותר מ-2 צבעים כמו כאן:

div {
  background: -webkit-linear-gradient(#050831, #517273, #f1c89c);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#050831, #517273, #f1c89c);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#050831, #517273, #f1c89c);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#050831, #517273, #f1c89c);  /* Standard syntax */
}
 

נוכל כמובן לשנות את זווית מעבר הצבע למשל כך:

div {
  background: -webkit-linear-gradient(45deg, #050831, #517273, #f1c89c);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #050831, #517273, #f1c89c);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #050831, #517273, #f1c89c);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #050831, #517273, #f1c89c);  /* Standard syntax */
}
 

נניח ונרצה מיקומים שאינם שווים בין הצבעים:

div {
  background: -webkit-linear-gradient(#050831 10%, #517273 30%, #f1c89c 60%);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#050831 10%, #517273 30%, #f1c89c 60%);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#050831 10%, #517273 30%, #f1c89c 60%);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#050831 10%, #517273 30%, #f1c89c 60%);  /* Standard syntax */
}
 

מה עם מעברי צבע בצורה מעגלית?

פשוט מאוד נחליף את המילה linear במילה radial:

div {
  background: -webkit-radial-gradient(#050831, #f1c89c);  /* For Safari 5.1 to 6.0 */
  background: -o-radial-gradient(#050831, #f1c89c);  /* For Opera 11.1 to 12.0 */
  background: -moz-radial-gradient(#050831, #f1c89c);  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#050831, #f1c89c);  /* Standard syntax */
}
 

כמו ששמתם לב הצורה נמרחת ונמתחת על הכל, כדי למנוע את זה נכניס את המילה circle:

div {
  background: -webkit-radial-gradient(circle, #050831, #f1c89c);  /* For Safari 5.1 to 6.0 */
  background: -o-radial-gradient(circle, #050831, #f1c89c);  /* For Opera 11.1 to 12.0 */
  background: -moz-radial-gradient(circle, #050831, #f1c89c);  /* For Firefox 3.6 to 15 */
  background: radial-gradient(circle, #050831, #f1c89c);  /* Standard syntax */
}
 

אלה כל הדברים הבסיסיים שניתן לעשות עם מעברי צבע ב-CSS, יש עוד הרבה אפשרויות נגזרות מתוך זה שכדאי לחקור. בהצלחה!