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

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

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

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

שניהם ערכי CSS סטנדרטיים, הכתובים כ-linear-gradient() ו- radial-gradient(), ושניהם משתמשים באותה רשימה של עצירות צבע, כך ששינוי הסוג שומר על הצבעים שלך ורק משנה את אופן התפשטותם.

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

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

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

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