עצבו גרדיאנטים לינאריים, רדיאליים וקוניים ב-CSS. העתיקו קוד תואם דפדפנים בלחיצה. בחינם לגמרי, בלי הרשמה.
background: #8B5CF6;
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]נבנה מהיסוד לפרטיות קפדנית, הרצה מיידית ואפס חיכוך. בלי מנויים, חומות תשלום או הרשמה.
הוסיפו, הסירו וגררו עצירות צבע על ציר זמן חזותי, כדי לערבב גרדיאנטים מרובי צבעים בדיוק.
עברו בקלות בין לינארי (כיווני), רדיאלי (מעגלי) וקוני (מטאטא) ב-CSS.
מייצר אוטומטית קוד CSS תואם דפדפנים, כולל קידומות ספק לתמיכה רחבה.
בנוי כולו ב-JavaScript בצד הלקוח. בלי השהיית שרת ובלי המתנה — משוב חזותי מיידי.
השוו את מנוע ה-WebAssembly המקומי שלנו לכלי ענן ישנים.
| מאפיין | Utiliome (דפדפן מקומי) | ממירי ענן ישנים |
|---|---|---|
| סוגי גרדיאנט | לינארי, רדיאלי, קוני | בדרך כלל רק לינארי |
| פלט קוד | CSS רגיל ומחלקות Tailwind | CSS בסיסי בלבד |
| ביצועים | HTML5 Canvas בלי השהיה | צביעה מחדש איטית של ה-DOM |
| עלות | 100% בחינם לתמיד | יכולות פרימיום מאחורי חומת תשלום |
בלי התקנת תוכנה. הכול רץ ישירות בדפדפן.
לחצו על עצירות הצבע לאורך ציר הזמן ובחרו את קודי ה-HEX של ההתחלה והסיום.
השתמשו בחוגת הזווית כדי לסובב גרדיאנט לינארי, או עברו למצב רדיאלי לאפקט שמתפרץ מהמרכז.
לחצו על העתקה כדי לקבל את קוד ה-'background-image' המעוצב לגיליון הסגנונות.
תשובה קצרה: גרדיאנט CSS נוצר מתמטית בדפדפן: אפס בקשות HTTP, קנה מידה חד במסכי Retina בלי פיקסולציה, וגודל של כמה בייטים של טקסט.
לפני עשור מעצבים יצרו רקעי גרדיאנט ב-Photoshop, חתכו אותם ל-JPG כבדים והגדירו אותם כתבנית חוזרת. זה פגע ב-SEO, האט טעינה ונראה מפוקסל במסכי 4K.
דפדפנים מודרניים הוסיפו את הפונקציה linear-gradient(). זו הוראה מתמטית ולא תמונה סטטית, וה-GPU מרנדר את המעבר בזמן אמת. עם המחולל של Utiliome אפשר ליצור גרדיאנטים מורכבים עם כמה עצירות, שנטענים מיד ומתאימים את עצמם לרוחב המסך.
תשובה קצרה: גרדיאנט לינארי מערבב צבעים לאורך קו ישר (למשל מלמעלה למטה). רדיאלי יוצא מנקודת מרכז כמו מעגל. קוני מטאטא צבעים סביב ציר מרכזי כמו תרשים עוגה או גלגל צבעים.
שלושת סוגי הגרדיאנט ב-CSS נותנים גמישות יצירתית רחבה:
45deg או to right bottom) והצבעים עוברים בצורה חלקה לאורך הציר.תשובה קצרה: עצירת צבע קובעת איפה על קו הגרדיאנט צבע מסוים מגיע לעוצמה מלאה. כמה עצירות (למשל אדום 0%, צהוב 50%, כחול 100%) יוצרות רקע מורכב עם כמה פסים.
גרדיאנט בסיסי צריך שני צבעים: התחלה וסיום. Utiliome מאפשר להוסיף עצירות צבע בלי הגבלה לאורך ציר הזמן.
למשל, ב-linear-gradient(to right, red 0%, green 50%, blue 100%) הדפדפן עובר מאדום לירוק עד אמצע המסך, ומירוק לכחול עד הסוף.
אפשר גם ליצור "עצירות קשות" (קווים חדים במקום מעבר חלק) על ידי שני צבעים שונים באותו אחוז (למשל red 50%, blue 50%). כך בונים פסים ודגלים ב-CSS טהור.
תשובה קצרה: אפשר להחיל גרדיאנט על טיפוגרפיה עם 'background-clip: text' ו-'-webkit-text-fill-color: transparent', כך שהרקע נחתך בדיוק לצורת הגופן.
אחד הטרנדים הפופולריים הוא גרדיאנט על כותרות גדולות, כמו בכותרות H1 של Apple ו-Stripe.
מייצרים גרדיאנט רגיל ב-Utiliome ומחילים אותו בשלושה כללים:
background-image: linear-gradient(...);-webkit-background-clip: text; background-clip: text;-webkit-text-fill-color: transparent;הטקסט נשאר ניתן לבחירה וידידותי ל-SEO, ועדיין נראה מרשים.
תשובה קצרה: דפדפנים מודרניים תומכים בגרדיאנטים באופן מובנה, אבל דפדפנים ישנים (גרסאות Safari ישנות ו-Internet Explorer) דרשו קידומות '-webkit-' ו-'-moz-'.
בעבר כתיבת גרדיאנטים ב-CSS הייתה סיוט כי המפרט השתנה כמה פעמים. מפתחים כתבו חמש שורות רק כדי שהגרדיאנט יופיע ב-Firefox, Safari ו-Chrome.
היום התחביר linear-gradient() מקובל בכל מקום. כדי לשמור על תאימות לאפליקציות ארגוניות עם מכשירים ישנים, המחולל של Utiliome יכול להזריק אוטומטית קידומות גיבוי -webkit- לקוד המיוצא.
תשובה קצרה: ל-Tailwind CSS יש מחלקות עזר מובנות לגרדיאנט (למשל 'bg-gradient-to-r from-cyan-500 to-blue-500'). ב-Utiliome מעצבים חזותית ומייצאים מיד מחרוזת מחלקות Tailwind.
בפיתוח React או Next.js עם Tailwind CSS, מאפייני style עם CSS רגיל שוברים את זרימת העבודה של מחלקות עזר.
Utiliome מגשר על הפער. אחרי שמסיימים את הגרדיאנט בקנבס, בוחרים ייצוא Tailwind. המנוע ממפה את קודי ה-HEX לערכים שרירותיים (כמו from-[#ff0000] via-[#00ff00] to-[#0000ff]) ומחזיר מחרוזת מחלקות מוכנה להדבקה בקומפוננטות JSX.
כל מה שצריך לדעת על מחולל גרדיאנט CSS החינמי של Utiliome.
צרו את הגרדיאנט, והוסיפו את המאפיינים 'background-clip: text;' ו-'-webkit-text-fill-color: transparent;' כדי לחתוך את הגרדיאנט לצורת הגופן.
גרדיאנט קוני מטאטא צבעים סביב ציר מרכזי (כמו סריקת מכ"ם או תרשים עוגה), ולא לאורך קו ישר.
כן. בייצוא יש לשונית Tailwind שמייצרת את מחלקות העזר המדויקות (למשל bg-gradient-to-r from-red-500) לפרויקטי React/Next.js.
לא. גרדיאנט CSS מרונדר מתמטית ב-GPU. הוא עדיף בהרבה על תמונת רקע: אפס בקשות רשת ורק בייטים של נתונים.
כן, 100% בחינם, בלי מגבלות, בלי פרסומות ובלי הרשמה.