מחולל CSS Gradient

לעצב גרדיאנטים ב-CSS באופן ויזואלי עם פלט קוד חי.

מאת Nethanel Bar, Co-founder & CEO

עודכן לאחרונה 25 באפריל 2026

מוכנים ללמוד תכנות באמת?

ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.

מה זה מחולל גרדיאנטים ל-CSS?

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

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

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

מה תלמדו תוך כדי עיצוב גרדיאנטים

גרדיאנט מוגדר על ידי *כיוון* (או צורה) ו*נקודות צבע*: צבעים עם מיקומים אופציונליים.
שתי נקודות צבע באותו מיקום יוצרות *קצה חד*, שימושי לפסים או לרקעים מפוצלים.
מרחבי צבע מודרניים כמו oklch מפיקים גרדיאנטים חלקים ואחידים יותר מבחינה תפיסתית מאשר rgb או hsl.
גרדיאנטים הם תמונות ב-CSS: אפשר להשתמש בהם בכל מקום שבו background-image, border-image, mask-image או filter מקבלים תמונה.

איך לבנות גרדיאנט CSS צעד אחר צעד

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

מדריך מהיר לגרדיאנטים ב-CSS

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

פונקציה	מה היא עושה	דוגמה
`linear-gradient`	מעבר צבע לאורך קו	`linear-gradient(135deg, #6c8cff, #b18cff)`
`radial-gradient`	צבע שמקרין מנקודה	`radial-gradient(circle at 30% 20%, #fff, #000)`
`conic-gradient`	צבע שמסתובב סביב מרכז	`conic-gradient(from 0deg, red, yellow, red)`
`repeating-linear-gradient`	דוגמת פסים חוזרת	`repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px)`
נקודת צבע	צבע עם מיקום אופציונלי	`#6c8cff 25%`
עצירה חדה	אותו מיקום פעמיים ← קצה חד	`#000 50%, #fff 50%`
גרדיאנטים מרובים	נערמים על אלמנט אחד	`background: g1, g2, g3;`

דוגמאות לגרדיאנטים ב-CSS לנסות

גרדיאנט hero עדין

CSS

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

גרדיאנט אלכסוני בשני צבעים. המראה הקלאסי של hero ב-SaaS עצמאי: נעים לעין וידידותי לטקסט.

זרקור רדיאלי

CSS

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

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

פסים עם עצירות חדות

CSS

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

שתי נקודות באותו מיקום יוצרות קצה חד. עטיפה ב-repeating-linear-gradient חוזרת על הדוגמה.

טעויות נפוצות בגרדיאנטים ב-CSS

להשתמש ביותר מדי נקודות צבע: שלוש או ארבע מספיקות בדרך כלל; יותר מזה לרוב מעכיר את התוצאה.
לשכוח ש-0deg הוא מלמטה למעלה בגרדיאנטים של CSS (שונה מכלי עיצוב רבים שבהם 0° הוא ימינה).
לשים טקסט על גרדיאנט בעל ניגודיות גבוהה בלי לבדוק קריאות מול שני הקצוות: זכרו את ניגודיות WCAG.
להנפיש את background-image ישירות. רוב הדפדפנים לא מבצעים מעבר חלק בין גרדיאנטים: הנפישו את background-position או השתמשו במעבר על משתנה משותף במקום.
למתוח גרדיאנט על פני אלמנטים רחבים מאוד בלי לחשוב על פסי צבע (banding). הוסיפו נקודות ביניים או השתמשו ב-oklch למעברים חלקים יותר.

שאלות נפוצות על גרדיאנטים ב-CSS

איך יוצרים גרדיאנט ב-CSS?

השתמשו ב-linear-gradient, radial-gradient או conic-gradient כערך של המאפיין background או background-image. כל פונקציה מקבלת כיוון (או מרכז) ורשימה של נקודות צבע.

מה ההבדל בין גרדיאנט ליניארי, רדיאלי וקוני?

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

אפשר להנפיש גרדיאנט ב-CSS?

דפדפנים לא מבצעים מעבר חלק בין תמונות גרדיאנט. הטריקים המקובלים הם להנפיש את background-position לגרדיאנט נע, לעבור בין שתי שכבות גרדיאנט באמצעות אטימות, או להנפיש CSS custom properties שמשמשים כנקודות צבע.

למה הגרדיאנט שלי נראה עם פסים?

פסי צבע (banding) נוצרים כשמעט מדי צעדי צבע בדידים נפרשים על שטח רחב. הוסיפו נקודות ביניים, עברו למרחב צבע תפיסתי כמו oklch, או הוסיפו שכבת רעש עדינה (dithering).

האם גרדיאנטים ב-CSS נתמכים בכל הדפדפנים?

גרדיאנטים ליניאריים ורדיאליים נתמכים בכל מקום. גרדיאנטים קוניים נתמכים בכל הדפדפנים המודרניים. לדפדפנים ישנים מאוד הייתם מוסיפים background-color אחיד כגיבוי לפני הצהרת הגרדיאנט.