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

תצוגה מקדימה חיה
פריסטים
סוג גרדיאנט
זווית
°
עצירות צבע
גרור ידית להזזת עצירה, או לחץ על הסרגל להוספת אחת. בחר עצירה לעריכת צבעה.
עצירה נבחרת
%
CSS
background: ;

הכל מחושב חי בדפדפן שלך — ללא הרשמה, חינם לחלוטין.


אודות גנרטור גרדיאנט

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

תבניות מוכנות מראש נותנות לכם נקודת התחלה חזקה כשאתם לא רוצים להתחיל מדף חלק, ופעולות בלחיצה אחת — אקראי, היפוך, סיבוב 45° — הופכות את החקירה למהירה. קוד ה-CSS שנוצר תמיד גלוי ונשאר מסונכרן עם התצוגה המקדימה, כך שמה שאתם מעתיקים הוא בדיוק מה שראיתם.

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

כיצד להשתמש ב-גנרטור גרדיאנט

  1. בחרו סוג גרדיאנט: ליניארי, רדיאלי או קוני.
  2. התחילו מתבנית מוכנה או לחצו על "אקראי" לנקודת התחלה מיידית.
  3. גררו את ידיות נקודות העצירה למיקום הצבעים, לחצו על הרצועה להוספת נקודות, וערכו את צבעה של כל נקודה.
  4. כווננו את הזווית, או השתמשו ב"היפוך" וב"סיבוב 45°" כדי לשנות את כיוון התערובת.
  5. העתיקו את חוקת ה-CSS או את ערך הרקע והדביקו אותם בפרויקט שלכם.

שאלות נפוצות

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

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

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

גרדיאנטים ליניאריים ורדיאליים נתמכים בכל מקום. גרדיאנטים קוניים נתמכים בכל הדפדפנים המודרניים אך לא בישנים מאוד, אז ספקו color-background חלופי אם אתם צריכים לתמוך בגרסאות ישנות.

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

שתף זאת

חיפושים פופולריים
מחולל גרדיאנט יוצר גרדיאנט css מחולל גרדיאנט לינארי יוצר גרדיאנט רדיאלי גרדיאנט קוני css מחולל גרדיאנט חינמי
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.