מחולל CSS Gradient
בנו מעברי צבע ב-CSS בצורה חזותית: סוג לינארי, רדיאלי או קוני, מחוון זווית ועד שש עצירות צבע עם תצוגה מקדימה חיה ברוחב מלא וקוד בר-העתקה.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
לכתוב linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) ביד ולרענן את העמוד כדי לראות אותו זו לולאה איטית. מחולל זה סוגר אותה: בחרו לינארי, רדיאלי או קוני, גררו את מחוון הזווית, קבעו כל עצירת צבע עם בורר צבעים מקורי ומיקום באחוזים — והתצוגה המקדימה ברוחב מלא מתרעננת בכל קלט בודד, כששורת הרקע המוגמרת תמיד מוכנה להעתקה.
שלושת סוגי מעברי הצבע מכסים משימות שונות. מעברי צבע לינאריים דוהים לאורך כיוון ונושאים איתם את רוב מקטעי ה-Hero והכפתורים; מעברי צבע רדיאליים קורנים מהמרכז לזוהרים וויגנטים; מעברי צבע קוניים סובבים מסביב למרכז ומניעים גרפי עוגה וגלגלי צבעים. תוכלו לעבור בין סוגים בכל רגע — העצירות שלכם עוברות איתכם, כך שהשוואה בין השלושה אורכת שניות.
עד שש עצירות צבע נותנות לכם מרחב לעיצובים מרובי-פסים, ודפי הקביעות המוכנות מציגים שילובים מוכחים — שקיעה חמה, אוקיינוס רגוע וצמד פסטל רך — כנקודות התחלה שאפשר לכוונן במקום קנבסים ריקים. שימו לב לחלוקת התפקידים: מחולל פלטות הצבעים באתר בוחר צבעים אחידים הרמוניים וממיר פורמט הצבעים מתרגם ערך בין HEX, RGB ו-HSL, בעוד שכלי זה עושה עבודה שונה — הוא הופך צבעים נבחרים לקוד CSS gradient מוכן.
הכול רץ מקומית בדפדפן שלכם: אין העלאה, אין חשבון, אין סבבי שרת, והמחולל ממשיך לעבוד במצב לא מקוון לאחר הטעינה.