מחולל CSS gradient

איך זה עובד

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

מוסכמת הזווית מבלבלת אנשים

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

שלושת הסוגים

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

גרדיאנט הוא תמונה, לא צבע

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

הוספת צבע אמצעי

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