---

מה זה גרדיאנט CSS?

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

כיצד להשתמש במחולל גרדיאנטים CSS

1. בחרו הגדרה מוכנה מהדוגמאות או הגדירו גרדיאנט משלכם.

2. בחרו את סוג הגרדיאנט: linear, radial או conic.

3. כווננו את הזווית (עבור linear/conic) או הצורה (עבור radial).

4. ערכו עצירות צבע — שנו צבעים ומיקומים (0–100%).

5. הוסיפו או הסירו עצירות צבע לפי הצורך.

6. העתיקו את ה-CSS והדביקו אותו בגיליון הסגנונות שלכם.

שאלות נפוצות

איך אני יוצר גרדיאנט שקוף? השתמש בערכי צבע rgba() או hsla() עם ערוץ אלפא של 0 לשקיפות מלאה. לדוגמה, עצירת צבע של rgba(0,0,0,0) היא שחור שקוף לחלוטין, שימושי לעמיתות מתפוררות על תמונות.

איך אני יוצר עצירת צבע קשה (ללא מעבר)? הנח שתי עצירות צבע באותה עמדה — אחת מסתיימת ואחת מתחילה בנקודה זו. לדוגמה, אדום 50%, כחול 50% יוצר מעבר מיידי מאדום לכחול בנקודת האמצע ללא מעבר גרדיאנט.

אילו דפדפנים תומכים בגרדיאנטים חרוטיים? גרדיאנטים חרוטיים נתמכים בכל הדפדפנים המודרניים (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). הם אינם נתמכים ב-Internet Explorer.

האם אני יכול להשתמש בגרדיאנטים מרובים באותו אלמנט? כן. CSS background מקבל רשימה מפוצלת בפסיקים של שכבות. אתה יכול לערום גרדיאנטים, לשלב אותם עם תמונות רקע, ולשלוט בעמדה וגודל של כל שכבה באופן עצמאי.

Keywords: מחולל גרדיאנט CSS, גרדיאנט ליניארי, גרדיאנט רדיאלי, גרדיאנט קוני, מחולל רקע CSS, בורר צבע גרדיאנט, כלי גרדיאנט CSS