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

תצוגה מקדימה
פלט CSS
background: ;

הכול פועל בדפדפן שלך — ללא העלאה, ללא הרשמה.

סוג מעבר צבע
deg
נקודות צבע לחץ על הסרגל להוספת נקודה, גרור להזזה
נקודה נבחרת
צבע הנקודה
100%
%
הגדרות מוכנות

אודות מחולל מעברי צבע ב-CSS

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

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

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

כיצד להשתמש ב-מחולל מעברי צבע ב-CSS

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

שאלות נפוצות

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

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

כן — לכל נקודה יש בקרת אטימות משלה. נקודה באטימות 0% מדהה את הגרדיאנט, וזו הדרך הסטנדרטית למזג שכבת-על צבועה לתוך תמונה או לדעוך אזור גיבור לתוך רקע העמוד.

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

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

שתף זאת

חיפושים פופולריים
מחולל מעברי צבע css מחולל linear gradient css radial gradient css conic gradient css יצירת מעבר צבע לרקע css כלי נקודות צבע למעבר בורר זווית למעבר צבע css מחולל מעברי צבע מקוון
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

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