מהו מחולל שיפוע CSS?
CSS Gradient Generator הוא כלי מקוון חינמי המאפשר לך ליצור שיפועים יפים של CSS עם ממשק חזותי ותצוגה מקדימה חיה. הוא תומך בסוגי שיפוע ליניאריים, רדיאליים וחרוטיים, ומאפשר לך לעצב מעברי צבע מדהימים עבור רקעים, כפתורים, כרטיסים ורכיבי ממשק משתמש אחרים.
הכלי מספק ממשק גרירה ושחרור אינטואיטיבי להוספה ומיקום של עצירות צבע, התאמת כיוון וזווית השיפוע ואטימות כוונון עדין. אתה יכול לראות בדיוק איך השיפוע שלך ייראה בזמן אמת, מה שמקל על ניסוי עם שילובי צבעים שונים עד שתשיג את התוצאה המושלמת.
לאחר שתהיה מרוצה מהשיפוע שלך, פשוט העתק את קוד ה-CSS שנוצר והדבק אותו בגיליון הסגנונות שלך. הכלי מוציא CSS נקי ותואם בין דפדפנים שפועל בכל הדפדפנים המודרניים. אין צורך במומחיות עיצוב או קידוד כדי ליצור שיפועים בעלי מראה מקצועי.
דבר אחד שצריך לדעת על האופן שבו דפדפנים מציירים שיפועים: צבעים עוברים אינטרפולציה ב-sRGB, וזה לא אחיד מבחינה תפיסתית. מיזוג שני צבעים מנוגדים מאוד, כחול לצהוב הוא המקרה הקלאסי, לוקח את נקודת האמצע דרך אפור חסר רווי שאף צבע קצה לא מרמז. התיקונים הרגילים הם להוסיף עצירה באמצע כדי לנווט את הנתיב, או לבחור צבעי קצה קרובים יותר זה לזה על הגלגל. חזרה על עצירה באותו מיקום אינה נחוצה עוד עבור שיפועים סטנדרטיים בכל דפדפן שעדיין מקבל עדכונים, כך שהפלט הקצר ביותר הוא גם התואם ביותר. שיפועים צבועים כרקע, כך שהם צריכים קופסה עם מידות כדי להיות גלויות בכלל.
כיצד להשתמש במחולל שיפוע CSS?
בחר סוג שיפוע
בחר בין סוגי שיפוע ליניאריים, רדיאליים או חרוטיים. כל סוג יוצר סוג אחר של אפקט מעבר צבע.
הוסף צבע מפסיק
לחץ כדי להוסיף עצירות צבע ובחר צבעים עבור כל עצירה. גרור אותם כדי להתאים את מיקומם לאורך השיפוע.
כוונן את הכיוון והזווית
הגדר את כיוון השיפוע או הזווית עבור שיפועים ליניאריים, או את המיקום המרכזי עבור שיפועים רדיאליים כדי לשלוט כיצד הצבעים זורמים.
העתק את קוד ה-CSS
העתק את קוד ה-CSS שנוצר בלחיצה אחת והדבק אותו ישירות בגיליון הסגנונות שלך. הקוד מוכן לשימוש בכל פרויקט אינטרנט.
תכונות מפתח
פלט מחלקה ומוטבעת
השיפוע נפלט הן ככלל CSS והן כהצהרת רקע חשופה לסגנון מוטבע, כל אחד עם כפתור העתקה משלו
מספר סוגי שיפוע
צור שיפועים ליניאריים, רדיאליים וחרוטיים עם שליטה מלאה על כיוון, זווית וצורה
תצוגה מקדימה ויזואלית חיה
ראה את עדכון השיפוע שלך בזמן אמת בזמן שאתה מכוון צבעים, עצירות וכיוונים
עותק CSS בלחיצה אחת
העתק קוד CSS נקי, חוצה דפדפנים מוכן להדבקה בגיליונות הסגנונות שלך
Frequently Asked Questions
Related Tools
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!