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

מהו גרדיאנט ב-CSS?

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

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

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

אפשר לערום כמה גרדיאנטים על ידי הפרדה בפסיקים בתוך background-image ולשלב אותם עם background-blend-mode לטקסטורות עשירות יותר. CSS תומך גם באינטרפולציה במרחבי צבע כמו oklch לקבלת מעברים חלקים יותר מבחינה תפיסתית.

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