תיעוד CSS עם דוגמאות להרצה: מעברי צבע

Q: איך יוצרים radial gradient ב-CSS?

משתמשים ב-background-image: radial-gradient(#93c5fd, #1e3a8a);. הוסיפו צורה ומיקום לפני הצבעים, למשל radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: מה ההבדל בין circle ל-ellipse ב-radial-gradient?

ellipse (ברירת המחדל) נמתח לפי הפרופורציות של התיבה, כך שבתיבה רחבה הוא רחב. circle שומר על מעבר הצבע עגול, לא משנה מה צורת התיבה.

Q: איך קובעים את הכיוון של linear gradient?

כותבים קודם כיוון או זווית: linear-gradient(to right, red, blue) או linear-gradient(45deg, red, blue). ברירת המחדל היא to bottom (180deg); 0deg מצביע למעלה, והזוויות מסתובבות עם כיוון השעון.

Q: איך יוצרים פסים חדים במקום מעבר רך?

נותנים לשני צבעים את אותה נקודת עצירה: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) מחליף צבע באמצע בלי מעבר. repeating-linear-gradient חוזר על דפוס של עצירות כאלה.

Q: אפשר להשתמש במעבר צבע בתור background-color?

לא. מעבר צבע הוא תמונה, ולכן הוא נכתב ב-background-image או בקיצור background. background-color: linear-gradient(...) לא תקין ונזרק.

מעברי צבע רדיאליים

radial-gradient() ממזג צבעים החוצה מנקודת מרכז. כמו כל מעבר צבע ב-CSS, הוא תמונה, ולכן הוא נכתב ב-background-image (או בקיצור background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

התחביר המלא הוא radial-gradient(shape size at position, color stops). כל מה שלפני הצבעים הוא אופציונלי.

חלק	ערכים	ברירת מחדל
צורה	`circle`, `ellipse`	`ellipse`
גודל	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, או אורכים	`farthest-corner`
מיקום	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
נקודות עצירה	שני צבעים או יותר, לכל אחד מיקום אופציונלי

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a, ו-circle 40px, #f59e0b 99%, transparent (נקודה עם קצה חד).

מעברי צבע ליניאריים

linear-gradient() ממזג לאורך קו ישר. כתבו קודם כיוון או זווית, ואחר כך את הצבעים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

זוויות מתחילות ב-0deg שמצביע למעלה ומסתובבות עם כיוון השעון, כך ש-90deg הוא to right ו-180deg הוא ברירת המחדל to bottom. to right נשאר פיזי גם בעמודים מימין לשמאל; הפכו אותו בעצמכם אם מעבר הצבע צריך לעקוב אחרי כיוון הקריאה.

נקודות עצירה ועצירות חדות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

עצירה יכולה לקבל גם שני מיקומים, #111827 12px 24px, שמצייר פס מלא מ-12px עד 24px.

מעברי צבע קוניים

conic-gradient() מסובב צבעים סביב נקודת מרכז, כמו מחוגי שעון. עם עצירות חדות הוא מצייר תרשים עוגה בלי תמונות ובלי JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

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

טקסט עם מעבר צבע

חתכו רקע של מעבר צבע לפי האותיות, והפכו את הטקסט עצמו לשקוף:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

זכרו צבע גיבוי רגיל ב-color: אם החיתוך נכשל, הטקסט נעלם. לטקסט עם מעבר צבע יש גם ניגודיות לא אחידה, אז השתמשו בו רק לכותרות גדולות.

מעברי צבע נערמים עם תמונות ומעברי צבע אחרים ברשימת background-image אחת; עמוד תמונת הרקע מסביר שכבות, גודל ומיקום.

טעויות נפוצות

background-color: linear-gradient(...). מעבר צבע הוא תמונה: השתמשו ב-background-image או ב-background.
מעלות בכיוון הלא נכון. 0deg מצביע למעלה, לא ימינה. 90deg הולך ימינה.
מעבר צבע על אלמנט בלי גובה. שום דבר לא מופיע; תנו לו תוכן או גודל.
צבעי אמצע עכורים. מיזוג של שני צבעים רוויים והפוכים, כמו אדום וירוק, עובר דרך אפור חום ב-sRGB. הוסיפו עצירת אמצע, או מזגו במרחב צבע אחר: linear-gradient(in oklch, red, green).
פסים במעברי צבע גדולים ועדינים. צבעים קרובים מאוד על שטח גדול מראים מדרגות; קצת יותר ניגודיות בין העצירות עוזרת.

שאלות נפוצות

איך יוצרים radial gradient ב-CSS?

משתמשים ב-background-image: radial-gradient(#93c5fd, #1e3a8a);. הוסיפו צורה ומיקום לפני הצבעים, למשל radial-gradient(circle at top left, #93c5fd, #1e3a8a).

מה ההבדל בין circle ל-ellipse ב-radial-gradient?

ellipse (ברירת המחדל) נמתח לפי הפרופורציות של התיבה, כך שבתיבה רחבה הוא רחב. circle שומר על מעבר הצבע עגול, לא משנה מה צורת התיבה.

איך קובעים את הכיוון של linear gradient?

כותבים קודם כיוון או זווית: linear-gradient(to right, red, blue) או linear-gradient(45deg, red, blue). ברירת המחדל היא to bottom (180deg); 0deg מצביע למעלה, והזוויות מסתובבות עם כיוון השעון.

איך יוצרים פסים חדים במקום מעבר רך?

נותנים לשני צבעים את אותה נקודת עצירה: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) מחליף צבע באמצע בלי מעבר. repeating-linear-gradient חוזר על דפוס של עצירות כאלה.

אפשר להשתמש במעבר צבע בתור background-color?

לא. מעבר צבע הוא תמונה, ולכן הוא נכתב ב-background-image או בקיצור background. background-color: linear-gradient(...) לא תקין ונזרק.

מושגים קשורים