הנקודות החשובות
- 01כל שלושת סוגי CSS gradient — Linear, Radial ו-Conic — נתמכים עם תצוגה חיה.
- 02הוסף עד שש עצירות צבע, כל אחת עם מיקום וצבע עצמאיים.
- 03הפלט הוא הצהרת background מוכנה להדבקה לכל גיליון סגנונות.
- 04אין הרשמה, אין התקנה, ולא יש העלאה — הכל פועל בדפדפן שלך.
למה להשתמש במחולל Gradient חזותי?
כתיבת CSS gradients ביד הופכת למייגעת במהירות. התחביר קריא ברגע שאתה יודע אותו, אבל בחירת עצירות מדויקות וצבעים ללא תצוגה מקדימה חזותית הופכת החלטת עיצוב פשוטה לניסוי וטעייה ב-DevTools. מחולל מאפשר לך לראות את התוצאה בזמן אמת ולייצא קוד נקי ברגע שהוא נראה נכון.
כלי זה תומך בכל שלושת סוגי gradient המודרניים. Linear הוא ההערה הקלאסית הכיוונית שאתה תשתמש בה לרקע של גיבורים וכפתורים. Radial משדר החוצה מנקודה — מעולה עבור אפקטי תאורה ונייטות. Conic ממטה סביב מרכז, מה שהוא הבחירה שלך עבור קטעי תרשים עוגה, גלגלי צבע ומחווני דקות. התחל מאחד מתצוגות המקדימה המובנות (Lime Swiss, Sunset, Sky, Aurora) או עצוב מאפס.
כיצד ליצור CSS Gradient
התהליך כולו לוקח פחות מדקה.
- 01
בחר סוג gradient
בחר Linear, Radial או Conic מבורר סוג. עבור Linear, הגדר גם את הזווית. התצוגה המקדימה מתעדכנת מיד.
- 02
הוסף וממקם עצירות צבע
לחץ על הוסף עצירה כדי להכניס עצירה חדשה, ואז גרור את הסליידר שלה או הקלד אחוז כדי לממקם אותה. תומך בעד שש עצירות — עצירות מסודרות מחדש בעמדה באופן אוטומטי.
- 03
בחר את הצבע של כל עצירה
לחץ על דגימת הצבע כדי לפתוח את בורר הצבע של המערכת, או הקלד ערך hex ישירות. עובד גם פורמט RGB וגם hex.
- 04
תצוגה מקדימה בזמן אמת
לוח התצוגה המקדימה מעריך את הgradient שלך באמצעות מנוע ה-gradient המקומי של הדפדפן, כך שהתוצאה תואמת בדיוק לאופן שה-CSS ייצור בייצור.
- 05
העתק את הצהרת CSS
לחץ על העתק כדי להשיג את ה-background: linear-gradient(...) השלם. הדבק אותו לגיליון סגנונות, רכיב בעיצוב, או ערך שרירותי של Tailwind כמו bg-[<value>].
חקות Gradient נפוצות
כל סוג gradient מצטיין בתרחיש אחר.
- 01רקע קטע Hero — Linear gradient בזווית 135° לסחיטה אלכסונית מודרנית.
- 02מצבי ריחוף כפתור — לא Linear gradient עדין של שתי עצירות לעומק.
- 03Radial spotlight או vignette — אפל לשקוף radial על שכבת overlay של תמונה.
- 04תרשימי עוגה וטבעות התקדמות — Conic gradient עם עצירות קשות.
- 05תצוגות מקדימות של בורר צבע — Conic gradient בספקטרום מלא.
- 06טקסט gradients — החל את הgradient על הרקע, ואז השתמש ב-background-clip: text.
פועל לחלוטין בדפדפן שלך
מחולל gradient פועל 100% מצד הלקוח — לא נשלחים נתונים לשום שרת. התצוגה המקדימה נעשית על ידי מנוע ה-CSS שלך, מה שאומר שמה שאתה רואה תואם למה שכל מבקר בדפדפן שלו יעריך עם אותו CSS.
הערה מעשית אחת: לקוחות דוא״ל עדיין יש תמיכה קטנה ל-CSS gradients. אם אתה הדבקת CSS שנוצר לתוך תבנית דוא״ל HTML, הוסף fallback background-color מוצק לפני הצהרת gradient כך שמקבלים בלקוחות ישנים יותר יראו משהו סביר.
CSS Gradient Generator FAQ
מה ההבדל בין Linear, Radial ו-Conic gradients?
Linear gradients משתנים לאורך קו ישר בזווית נתונה. Radial gradients משדרים החוצה מנקודת מרכז — שימושי עבור הדגשות ואפקטי כתם. Conic gradients משדרים סביב מרכז כמו מחוגי שעון — אידיאלי לקטעי עוגה וגלגלי צבע.
האם אוכל להשתמש בזה עבור פרויקטי Tailwind CSS?
כן. העתק את הערך שנוצר והשתמש בו כערך Tailwind שרירותי, לדוגמה: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind יכלול אותו בגיליון הפלט שלך.
האם התצוגה המקדימה תואמת בדיוק למה שאני אראה באתר החי?
כן — התצוגה המקדימה משודרת על ידי מנוע gradient הדפדפן אותו שיעריך את ה-CSS החי שלך, כך שהפלט הוא בדיוק בפיקסל.
האם אוכל להשתמש ב-CSS gradients בתבניות דוא״ל?
רוב לקוחות דוא״ל אינם תומכים ב-CSS gradients באופן אמין. תמיד הוסף background-color מוצק לפני הצהרת gradient שלך כ-fallback.
האם יש מגבלה למספר עצירות הצבע?
המחולל תומך בעד שש עצירות. לרוב עיצובים שתיים לארבע מספיקות; יותר משש נוטה להפחית בהירות ולא להוסיף עושר.