התוצאות מוצגות לצורכי מידע בלבד ועשויות להכיל שגיאות. מומלץ לאמת מידע חשוב באופן עצמאי. השימוש בכלי הוא באחריותכם בלבד.
מה הכלי עושה
מחולל הגרדיאנט ל־CSS בונה הצהרת background משני צבעים. בחרו ליניארי כדי למזג את הצבעים לאורך קו בכל זווית, או רדיאלי כדי שיתפשטו מהמרכז החוצה במעגל. התצוגה המקדימה מתעדכנת בזמן שמזיזים את הפקדים, ותיבת הפלט מכילה שורה מוכנה להדבקה, כמו background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
בגרדיאנט ליניארי הזווית קובעת את הכיוון: 0deg הולך מלמטה למעלה, 90deg משמאל לימין ו־180deg מלמעלה למטה. גרדיאנט רדיאלי מתעלם מהזווית ומשתמש ב־circle, כך שהצבע הראשון נמצא במרכז. שתי הצורות נתמכות בכל הדפדפנים העדכניים בלי קידומות ספקים (vendor prefixes), ולכן השורה שנוצרת עובדת כמו שהיא.
מתי להשתמש בו
- להוסיף רקע עדין בשני גוונים לאזור hero או לכפתור קריאה לפעולה.
- להחליף תמונת רקע של גרדיאנט ב־CSS, כך שהדף טוען קובץ אחד פחות.
- לנסות צמדי צבעי מותג זה לצד זה לפני שמכניסים אותם למערכת העיצוב.
- ליצור זוהר רדיאלי רך מאחורי לוגו או איור.
דוגמה
קלט
סוג: ליניארי
זווית: 90
צבעים: #3b82f6, #8b5cf6פלט
background: linear-gradient(90deg, #3b82f6, #8b5cf6);שאלות על הכלי
איך מוסיפים צבע שלישי?
הוסיפו אותו לרשימה שבתוך הפונקציה, מופרד בפסיק: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). אפשר גם לתת לכל צבע מיקום, כמו #8b5cf6 40%, כדי לשלוט בנקודה שבה הצבעים מתמזגים.
האם טקסט יישאר קריא על גרדיאנט?
בדקו את צבע הטקסט מול שני הקצוות של הגרדיאנט עם בודק ניגודיות צבעים. אם אחד הקצוות נכשל, הכהו אותו או הוסיפו מאחורי הטקסט שכבה חצי שקופה.
אפשר להשתמש בגרדיאנט כמסגרת או כמילוי של טקסט?
כן, עם קצת CSS נוסף. לטקסט, הגדירו את הגרדיאנט כ־background, ואז הוסיפו background-clip: text ו־color: transparent. למסגרות, border-image מקבל את אותה פונקציית גרדיאנט.
למה רואים פסים בגרדיאנט שלי?
פסים (banding) מופיעים כששני צבעים דומים נמתחים על שטח גדול. בחרו צבעים רחוקים יותר זה מזה, צמצמו את השטח, או הוסיפו נקודת עצירה באמצע כדי שכל מדרגה תהיה קטנה יותר.
האם הכלי חינמי?
כן, השימוש חינמי. בלי הרשמה ובלי אימייל. התוצאה מופיעה בדף הזה.
איך מקבלים את התוצאה?
משתמשים בכלי בדף הזה. התוצאה מופיעה כאן, בלי צורך במשלוח לאימייל.