אילו סוגי גרדיאנטים אפשר ליצור?

גרדיאנטים ליניאריים, רדיאליים וקוניים עם 2 עד 6 עצירות צבע. קבעו את הזווית לליניארי ולקוני, או את הצורה והגודל לרדיאלי.

אפשר לקבל את הקוד עבור Tailwind או SCSS?

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

איך שומרים או משתפים גרדיאנט?

הגרדיאנט נשמר בקישור לדף, כך שאפשר לשמור אותו בסימניות או לשלוח את הקישור למישהו והוא יראה את אותו גרדיאנט.

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

🌈

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

צור גרדיאנטים CSS לינאריים, רדיאליים וחרוטיים עם תצוגה מקדימה חיה. העתק את ה-CSS בלחיצה אחת.

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

פועל לא-מקוון לאחר טעינה

background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

סוג

זווית: 135°

מעבר חלק (OKLCH)

מונע אמצעים אפורים בין צבעים שונים מאוד. מוסיף שורת sRGB רגילה כגיבוי לדפדפנים ישנים.

הזזת גוון בכל העצירות: 0°

עצירות צבע

100%

הגדרות מוכנות

שימושים נפוצים

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

כיצד זה עובד

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

1
הגדר עצירות וכיוון
אתה מגדיר בין 2 ל-6 עצירות צבע באמצעות בורר הצבע המקורי של הדפדפן, ואז ממקם כל עצירה לאורך ציר 0–100% עם מחוון טווח. עבור גרדיאנטים ליניאריים וקוניים אתה גם בוחר זווית (0–360°); עבור גרדיאנטים רדיאליים אתה בוחר את הצורה (אליפסה או עיגול) ומילת מפתח הגודל שקובעת עד כמה הגרדיאנט משתרע.
2
buildCss מרכיב את מחרוזת הגרדיאנט
בכל שינוי, פונקציית buildCss מקומית משרשרת את הפרמטרים שלך לקריאת פונקציית CSS הנכונה — למשל linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). אין ספרייה מעורבת; המחרוזת נבנית בלוגיקת תבנית JavaScript פשוטה ומחוברת ישירות ממערך העצירות.
3
תצוגה מקדימה חיה מוצגת דרך סגנון inline
מחרוזת הגרדיאנט המורכבת מוחלת ישירות על אלמנט div כסגנון רקע inline, כך שמנוע ה-CSS של הדפדפן עצמו מציג את התצוגה המקדימה. אין קנבס או תמונה מעורבים — מה שאתה רואה זה פשוטו כמשמעו מאפיין ה-CSS שמוחל.
4
פלט מוכן-להעתקה בארבעה פורמטים
בורר פורמט הופך את אותה מחרוזת גרדיאנט ל-CSS פשוט (background: ...), בלוק CSS-עם-חלופה-מוצקה, מחלקת ערך שרירותי של Tailwind, או הצהרת משתנה SCSS. לחיצה על העתק כותבת את הפלט הנבחר ללוח דרך navigator.clipboard.writeText. הגרדיאנט הנוכחי מקודד גם ב-hash הכתובת כך שאפשר לסמן או לשתף אותו.