כלי צבע

מחולל מעברי צבע CSS: ליניארי, רדיאלי וקוני – חינם

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

נקודות צבע

  • 0%
  • 100%

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

השורה הראשונה היא צבע מלא, למכשירים ישנים מאוד שלא יכולים להציג מעברי צבע.

להתחיל מהגדרה מוכנה

נוצר במכשיר שלך.

למה כדאי להשתמש ב-מחולל מעברי צבע CSS

100% חינם
השתמשו בו כמה שתרצו. בלי הרשמה, בלי סימן מים, בלי צורך בהתקנה.
פרטיות מובנית
מה שאתם מקלידים נשאר בדפדפן שלכם ולעולם לא נשלח אלינו.
עובד בכל מכשיר
פועל בדפדפן ב-Windows, ב-Mac, ב-Linux, באנדרואיד ובאייפון. בלי צורך באפליקציה.

איך משתמשים ב-מחולל מעברי צבע CSS

  1. בחרו את הסוג: ליניארי, רדיאלי או קוני. קבעו את הכיוון במחוון, או בחרו «עיגול» או «אליפסה» למעבר רדיאלי.
  2. תחת «נקודות צבע» בחרו כל צבע או הקלידו קוד, וגררו את המחוון שלו כדי לקבוע את מיקומו. השתמשו ב«הוספת נקודה» לעוד צבעים, עד 8, וב«הפיכה» כדי להפוך את הסדר.
  3. או לחצו על אחת מההגדרות המוכנות תחת «התחלה מהגדרה מוכנה» ושנו אותה משם.
  4. לחצו על «העתקת CSS» והדביקו אותו בגיליון הסגנונות, או בחרו «גודל תמונה» ולחצו על «הורדת PNG».

שאלות נפוצות

איך משתמשים ב-CSS?

הדביקו את שתי השורות לכלל של האלמנט שרוצים לצבוע, כמו body או כפתור. השורה הראשונה היא צבע רזרבי אחיד; השנייה היא המעבר.

מה ההבדל בין ליניארי, רדיאלי וקוני?

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

איך משנים את כיוון מעבר ליניארי?

גררו את מחוון «כיוון» מ-0° עד 360°. 0° רץ מלמטה למעלה, 90° משמאל לימין, 180° מלמעלה למטה, ו-135° רץ באלכסון לכיוון הפינה הימנית התחתונה.

כמה צבעים יכול מעבר לכלול?

בין 2 ל-8 נקודות צבע. לכל נקודה מיקום מ-0% עד 100%; שימו שתי נקודות באותו מיקום לקו חד בין צבעים במקום מעבר הדרגתי.

אפשר להשתמש בשקיפות?

כן. הקלידו צבע כמו rgba(47, 91, 255, 0.5) או קוד HEX בן 8 ספרות בנקודת צבע, והמעבר דוהה לשקוף באותו מקום.

אפשר להוריד את המעבר כתמונה?

כן. בחרו 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 או 1500 × 500 ולחצו על «הורדת PNG», לטפט, שקף, פוסט ברשתות או כותרת.

ה-CSS עובד עם Tailwind, React או WordPress?

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

האם משהו מועלה?

לא. המעברים נוצרים במכשיר שלכם.

האם מחולל מעברי צבע CSS חינמי?

כן. השימוש חינם, בלי הרשמה ובלי צורך בהתקנה.

עזרה ומדריכים (באנגלית)

כלים קשורים