מחולל CSS Gradient

בחר צבעים וזוויות וצפה בקוד CSS Gradient תוך כדי יצירתו

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

תכונות

עדכון בו-זמני של תצוגה מקדימה וקוד

צבע וזווית משתנים, הראות ו-CSS מתעדכנים בו-זמנית

תמיכה בליניארי, רדיאלי וקוני

ציין בדקות את הזוויות, הצורה והמיקום המרכזי לכל סוג

התאמה של עד 10 צבעים בגרירה

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

8 דגימות ויצירה אקראית

התחל עם תצבוע קלאסי או אקראי וערוך בעדינות

כיצד להשתמש

בחר סוג

בחר סוג Gradient מליניארי, רדיאלי או קוני

בחר צבעים

בחר צבע לפי קוד או דגימה, הוסף צבעים עם 'הוסף צבע' והתאם עמדה ושקיפות

התאם כיוון

לליניארי: ציין זווית או כפתורי כיוון; לרדיאלי וקוני: קבע עמדה מרכזית

העתק קוד

לחץ על 'העתק' ודבק CSS של שורה אחת בסגנון שלך

מקרי שימוש

יצירת רקע תמונת הגיבור

החלט על צבע רקע לחלק העליון של אתר או לחצנים ללא כתיבת קוד

בחירת צבעים לכותרות בלוג

בחר בתצבוע קרוב מדגימות וסדור את רקע כותרת המאמר

שכבת-על מעל לתמונה

צור שכבה חצי-שקופה על ידי הנחת צבע עם שקיפות מופחתת מעל התמונה

התאמת Gradient רב-צבעוני

גרור בעדינות את עמדות הגבול של 3 צבעים או יותר

ידע בסיסי

ההבדל בין linear, radial וconic

ל-CSS Gradient יש 3 פונקציות עם דרכים שונות לשינוי צבע, כולן נכתבות בתכונת background.

linear-gradient：linear-gradient הוא Gradient ליניארי שבו הצבע משתנה לאורך קו ישר בזווית שצוינה.
radial-gradient：radial-gradient הוא Gradient רדיאלי שבו הצבע משתרע במעגל או באליפסה מהמיקום המרכזי כלפי חוץ.
conic-gradient：conic-gradient הוא Gradient קוני שבו הצבע משתנה בכיוון השעון סביב המיקום המרכזי.

התאמה בין זווית למילות כיוון

בחר linear-gradient, 0deg הוא כיוון מלמטה לחלק העליון, ובזמן שהמספרים גדלים הזווית מסתובבת עם כיוון השעון. ניתן לכתוב זוויות גם כמילות כיוון כגון 'to right'; 90deg שווה ל-'to right' ו-180deg שווה ל-'to bottom'.

דרך כתיבת עצירות צבע ושקיפות

עצירת צבע (color stop) היא העמדה בה הצבע הזה מופיע ב-Gradient; 0% הוא נקודת ההתחלה ו-100% היא נקודת הסיום. לדוגמה, '#3B82F6 0%, #8B5CF6 100%' משנה צבע מכחול בהתחלה לסגול בסוף.

פורמט #RRGGBB：פורמט #RRGGBB הוא דרך כתיבת צבע בה עוצמת אדום, ירוק וכחול מיוצגות כ-2 ספרות הקסדצימליות; #FF0000 הוא אדום אטום.
פורמט rgba：פורמט rgba הוא דרך כתיבת צבע עם ערכי RGB (0-255) ורמת שקיפות (0-1); שקיפות של 0.5 היא צבע חצי-שקוף.