מחולל שיפוע רדיאלי של CSS

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

מעבד... 0%

תוצאה

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

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

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

🛡️

מבוצע בדפדפן

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

פורמטים וכללים מקובלים

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

יתרונות מרכזיים

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

✓ עד שש עצירות צבע עם מיקומים בודדים מכסים הכל, החל מהדהייה פשוטה של שני צבעים ועד לרקע מורכב של ריבוי פסים.

✓ הצהרה אחת, שלושה מנועים: החלף בין ליניארי, רדיאלי וקוני מבלי לבנות מחדש את העצירות שלך.

מקרי שימוש

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

דרג כלי זה

תודה על תגובתך!