איך להשתמש בו
- בחרו ליניארי, רדיאלי או קוני, ואז הגדירו את הזווית או את מיקום המרכז.
- הגדירו לכל נקודת עצירה צבע, אטימות ומיקום. הוסיפו עד שש נקודות עצירה או הסירו נקודות שאין לכם צורך בהן.
- בדקו את התצוגה המקדימה, ואז העתיקו את שורת ה-CSS לגיליון הסגנונות שלכם.
איך זה עובד
הפלט הוא הצהרת רקע CSS תקנית. מעברי צבע ליניאריים נעים לאורך זווית: 0deg נע מלמטה למעלה, 90deg משמאל לימין, 180deg מלמעלה למטה. מעברי צבע רדיאליים מתפשטים מנקודת מרכז כעיגול או כאליפסה המותאמת לתיבה. מעברי צבע חרוטיים נסובים סביב נקודת מרכז, החל מהזווית שנבחרה, וזה שימושי לאפקטים דמויי עוגה ולגלגלי צבעים.
נקודות העצירה נכתבות לפי סדר המיקום שלהן, כך שאפשר לגרור מיקומים בחופשיות. נקודת עצירה עם אטימות מופחתת נכתבת כ-rgba(), מה שמאפשר לרקע להיראות מבעדה. שתי נקודות עצירה באותו מיקום יוצרות קצה חד במקום מעבר הדרגתי, וכך נוצרים פסים.
כל שלוש פונקציות המעבר עובדות בכל הדפדפנים העדכניים. מעברי צבע משתלבים במרחב הצבעים sRGB כברירת מחדל, מה שעלול להיראות מעט אפרפר בין צבעים משלימים (למשל כחול וצהוב); הוספת נקודת עצירה אמצעית עם צבע בהיר יותר מונעת זאת.
דוגמאות
רקע עדין לכותרת
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) נותן מעבר רך מלמעלה למטה ששומר על טקסט כהה קריא.
פסים עם קצוות חדים
השתמשו בארבע נקודות עצירה: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. שתי נקודות העצירה ב-50% נפגשות ללא מיזוג, וכך מתקבלים שני חצאים אחידים.
אפקט זרקור
גרדיאנט רדיאלי (עיגול בפינה השמאלית העליונה) מ-rgba(255, 255, 255, 0.6) ל-rgba(255, 255, 255, 0) המונח מעל צבע יוצר אור רך בפינה.
שאלות נפוצות
לאיזה כיוון הולך 0deg?
ב-CSS, 0deg מצביע כלפי מעלה, כך שהגרדיאנט מתחיל מלמטה ומסתיים למעלה. 90deg עובר משמאל לימין. זה שונה מחלק מיישומי העיצוב, שבהם 0° פירושו בדרך כלל משמאל לימין.
האם אפשר להשתמש בגרדיאנט על טקסט?
כן: החילו את הרקע, ואז הוסיפו background-clip: text ו-color: transparent. ודאו שהטקסט נשאר קריא מול הדף בכל נקודה של הגרדיאנט.
האם צריך קידומות ספק כמו -webkit-linear-gradient?
לא. הדפדפנים הנוכחיים תומכים בתחביר ללא קידומות. קידומות נחוצות רק לדפדפנים ישנים מאוד.
פרטיות
הכול נוצר בדפדפן שלכם. הצבעים וההגדרות שלכם אינם נשלחים או נשמרים.