Tooleem
שיווקהכלי רץ בדפדפן שלכם. שום קובץ או טקסט לא נשלח לשרתים שלנו.

מחולל גרדיאנטים

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

ערכות מוכנות
סוג גרדיאנט
זוית: 135°
עצירות צבע (2 מתוך 5)
מיקום%
מיקום%
פלט CSS
background
background: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);
background-image
background-image: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);
Tailwind v4
bg-[linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)]

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

שיתוף הכליוואטסאפ

מחולל גרדיאנטים הוא כלי דפדפן חינמי בעברית לבניית גרדיאנט CSS עם תצוגה חיה. בוחרים סוג (לינארי או רדיאלי), מזיזים את הזוית בגרדיאנט לינארי (0 עד 360 מעלות), מוסיפים בין 2 ל-5 עצירות צבע עם ערך hex ומיקום באחוזים, ומקבלים תצוגה גדולה ונקייה של התוצאה. הקוד המתאים נוצר אוטומטית בשתי גרסאות: `background:` קצר, ו-`background-image:` ארוך לעטיפה בסטאקים. נוסף קוד Tailwind ארביטררי לנוחות מי שמשתמש ב-Tailwind v4. לחיצה אחת מעתיקה את הקוד לקליפבורד. שש ערכות מוכנות (כחול-סגול רך, שקיעה, מנטה, כהה פרימיום, כתום חם, אפור נקי) כנקודת התחלה. הכל קורה בדפדפן שלכם: הצבעים, הזוית, מיקומי העצירות והפלט אינם נשלחים לשרת ואינם נשמרים. הכלי הוא עזר ויזואלי לבונה אתר, ללנדינג, למערכת עיצוב, או לתבנית מייל; אין בו בדיקת נגישות, אין בו בדיקת ניגודיות צבע, ואינו קובע תאימות WCAG. עודכן לאחרונה: מאי 2026.

01

איך משתמשים בכלי?

  1. 01בוחרים סוג גרדיאנטלינארי (linear) הוא מעבר ישר לאורך זוית. רדיאלי (radial) הוא מעבר ממרכז החוצה בצורת מעגל. הלינארי מתאים לרוב הרקעים; הרדיאלי מתאים להדגשות עגולות, כפתורי action, או רקעי כותרת.
  2. 02מזיזים את הזוית (לינארי)הזוית קובעת את כיוון המעבר. 0° = מלמטה למעלה. 90° = משמאל לימין. 180° = מלמעלה למטה. 135° (ברירת המחדל) = מהפינה השמאלית-עליונה לפינה הימנית-תחתונה, נראה רך וטבעי לרוב הגרדיאנטים.
  3. 03בונים את העצירותכל עצירה (color stop) מוגדרת על ידי צבע (hex כמו #1ed4c5) ומיקום באחוזים (0 עד 100). הוסיפו עד 5 עצירות עם "+ הוספת עצירה". לדוגמה: עצירה ראשונה במיקום 0% עם צבע א', עצירה שנייה במיקום 100% עם צבע ב'.
  4. 04מעתיקים את הקודלחיצה על "העתקת CSS" מעתיקה את הקוד לזיכרון. הדביקו אותו בקובץ ה-CSS של האתר, ב-style inline, או בתבנית עיצוב. גם קוד Tailwind ארביטררי זמין למי שעובד עם Tailwind v4.
02

מתי זה שימושי?

  • רקע כותרת ללנדינגגרדיאנט עדין מאחורי הכותרת הראשית של דף נחיתה מוסיף עומק בלי להפריע לקריאה. השתמשו בעצירות עם ניגוד נמוך בתוך אותה משפחת גוון.
  • כפתור CTA בולטגרדיאנט בכפתור עליון (לדוגמה כחול → סגול) מושך תשומת לב יותר מצבע אחיד. שמרו על שתי עצירות בלבד וזוית של 90° עד 135° לתחושה דינמית.
  • רקע עוטף לקטע במיילתבניות מייל מסוימות תומכות ב-CSS gradient. בדקו תאימות בלקוח המייל הספציפי לפני שליחה המונית; חלק מהלקוחות מציגים את הצבע הראשון בלבד.
  • רקע section באתרגרדיאנט אנכי (180°) רך בין שני גוונים סמוכים מפריד בין מקטעי תוכן בעמוד ארוך בלי קווי הפרדה חדים.
  • ערכת מותג מהירההציבו את צבעי המותג הראשיים כעצירות בגרדיאנט, צלמו את התצוגה ושמרו כדוגמית להצגה ללקוח לפני בחירה סופית.
03

דוגמאות שימוש

  • גרדיאנט לינארי דו-עצירות פשוט`linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)`.כחול-סגול רך בזוית 135°. שתי עצירות שמתאימות לרקע כותרת.
  • גרדיאנט תלת-עצירות`linear-gradient(100deg, #ff6a3d 0%, #ff9a5a 55%, #ffd166 100%)`.שקיעה: כתום, כתום-בהיר, צהוב. עצירה במיקום 55% מקדמת את הגוון האמצעי.
  • גרדיאנט רדיאלי לאפקט הילה`radial-gradient(circle, #1ed4c5 0%, #0a3a3a 100%)`.מרכז טורקיז שמתעמעם לכהה לכיוון הקצוות. מתאים לרקע כפתור או לכרטיס מודגש.
  • גרדיאנט אפור-לבן עדין`linear-gradient(180deg, #f5f5f7 0%, #d8d8de 100%)`.מעבר אנכי דק שמוסיף עומק לרקע ניטרלי. מתאים לכרטיסי מוצר או לרקע טבלה.
  • גרדיאנט כהה פרימיום`linear-gradient(135deg, #0f172a 0%, #1f2a44 100%)`.נראה רציני, מתאים לאתרי תוכנה, פיננסים, או דפי מחיר פרימיום.
04

טיפים לתוצאה טובה יותר

  • התחילו מערכה מוכנהבמקום להתחיל מאפס, לחצו על אחת משש הערכות (כחול-סגול, שקיעה, מנטה, כהה, כתום, אפור) כנקודת התחלה ושנו רק את מה שצריך.
  • שמרו על ניגוד טקסטגרדיאנט יכול ליצור אזורים בהירים יותר וכהים יותר באותו רקע. הטקסט חייב להישאר קריא בכל האזורים. אם משתמשים בטקסט לבן על גרדיאנט בהיר-לכהה, ודאו שגם האזור הבהיר ביותר עומד בניגוד מינימלי. הכלי הזה לא בודק זאת; השתמשו בכלי ניגודיות נפרד.
  • שתי עצירות מספיקות לרוב המקריםגרדיאנט פשוט עם 2 עצירות כמעט תמיד נראה טוב יותר מגרדיאנט עם 5 עצירות. הוסיפו עצירה שלישית רק כשיש סיבה אמיתית (לדוגמה גוון אמצעי בולט).
  • הנתונים נשארים אצלכםהצבעים, הזוית, מיקומי העצירות, וקוד ה-CSS הסופי אינם נשמרים ב-localStorage, אינם נשלחים לשרת, ואינם מועברים לאנליטיקס. רענון הדף מאפס את כל הנתונים.

  • מהו CSS gradient

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

  • מתי לבחור linear מול radial

    linear מתאים לרקעי דפים, רקעי section, כפתורים, ורקעי כותרת. הוא קל יותר לתכנן ולשלב בעיצוב. radial מתאים להדגשות עגולות, אפקט "הילה" סביב נקודה, רקעי לוגו או רקעי כפתור עגול. אין כלל ברזל; נסו את שניהם וראו מה משרת את המסר.

  • הזוית, מה היא אומרת

    הזוית בגרדיאנט לינארי נמדדת ביחס לציר אנכי. 0° = הצבע הראשון נמצא בתחתית, המעבר הולך כלפי מעלה. הזוית גדלה בכיוון השעון: 90° = מעבר משמאל לימין; 180° = מעבר מלמעלה למטה; 270° = מעבר מימין לשמאל. ב-Tooleem RTL, אם הציר השמאל/ימין נראה הפוך, פשוט הוסיפו או הפחיתו 180°.

  • תאימות

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

  • מה הכלי לא עושה

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

  • פרטיות

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

05

שאלות נפוצות

מה זה CSS gradient?

ערך רקע (background) שמייצר מעבר חלק בין צבעים ישירות בדפדפן, בלי תמונה. שני הסוגים הנפוצים הם linear-gradient ו-radial-gradient.

איך משלבים את הקוד באתר?

מעתיקים את שורת `background:` ומדביקים בקובץ ה-CSS של האלמנט הרלוונטי, או בתוך style inline. אפשר גם להשתמש בגרסה הארוכה `background-image:` כדי לשלב עם תמונת רקע נוספת בשכבות.

כמה עצירות צבע הכלי תומך?

בין 2 ל-5 עצירות. שתי עצירות מספיקות לרוב הגרדיאנטים; הוסיפו עוד רק כשיש סיבה.

מה ההבדל בין linear ל-radial?

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

הקוד עובד גם בתבניות מייל?

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

האם הכלי מספק בדיקת ניגודיות צבע ונגישות?

לא. הכלי מציג את הגרדיאנט ומפיק את ה-CSS. אין בו בדיקת ניגודיות מול טקסט ואינו קובע תאימות WCAG. השתמשו בכלי ניגודיות ייעודי לבדיקה.

הכלי שולח את הצבעים שלי?

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

הכלי בחינם?

כן. הכלי זמין בחינם, בלי הרשמה, בלי חשבון, ובלי הגבלת שימוש סבירה.

כלים קשורים

כלים קשורים

חסר לכם כלי, או מצאתם תקלה?אנחנו בונים את Tooleem לפי מה שאתם צריכים. ספרו לנו מה להוסיף או לתקן.
ספרו לנו