רקעים רב-שכבתיים ב-CSS נקי
מעבדת גרדיאנטים
רקע שנראה יקר כמעט אף פעם אינו גרדיאנט בודד. אלה שתיים או שלוש שכבות שקופות למחצה עם מצבי מיזוג וטשטוש שונים מעל בסיס אטום: שכבה אחת נקראת כמילוי, הערימה נקראת כאור שנופל על משטח. יש כאן 224 ערימות כאלה, וכל אחת מתפרקת: שנו את המצב, הטשטוש, השקיפות, הוסיפו גרעיניות. מה שלוקחים הוא קוד ולא תמונה — ל-Tailwind v4, CSS רגיל, משתנים או אובייקט ל-CSS-in-JS. לצד זה נמדד הניגודיות של כותרת וטקסט מעל הרקע הנבחר, כי רקע יפה שבולע את הכיתוב אינו שמיש. הכול רץ בדפדפן ושום דבר לא מועלה.
כותרת מעל הרקע
טקסט גוף מהסוג שיושב בדרך כלל בפסקה מתחת לכותרת.
נמדד מול הבסיס האטום. השכבות מעליו מזיזות את התמונה, אז המספר הוא כיוון ולא פסק דין: כדאי גם להסתכל.
screen · radial-gradient(ellipse 85% 75% at 20% 16%, rgba(255,107,53,0.92…
screen · radial-gradient(ellipse 70% 80% at 84% 82%, rgba(255,40,0,0.70) …
overlay · linear-gradient(200deg, rgba(255,200,150,0.18) 0%, transparent 4…
{/* Codearia Ember — Tailwind v4, arbitrary values, no config needed */}
<div className="relative isolate overflow-hidden [background-color:#0a0a0a]">
{/* layer 1 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_85%_75%_at_20%_16%,_rgba(255,107,53,0.92)_0%,_rgba(255,72,20,0.34)_42%,_transparent_72%)] [mix-blend-mode:screen] [filter:blur(122px)]" />
{/* layer 2 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_70%_80%_at_84%_82%,_rgba(255,40,0,0.70)_0%,_rgba(140,24,0,0.26)_48%,_transparent_76%)] [mix-blend-mode:screen] [filter:blur(166px)]" />
{/* layer 3 */}
<span className="absolute inset-0 [background-image:linear-gradient(200deg,_rgba(255,200,150,0.18)_0%,_transparent_46%,_rgba(0,0,0,0.50)_100%)] [mix-blend-mode:overlay]" />
<div className="relative">{children}</div>
</div>הקטגוריה של Codearia היא שלנו. 206 הרקעים האחרים מהפרויקט Aura מאת CristianOlivera1, רישיון MIT. github.com/CristianOlivera1/Aura
רקע גרדיאנט יפה לאתר ב-CSS נקי
בחרו רקע מתוך 224, פרקו אותו לשכבות והעתיקו את הקוד. כל אחד בנוי משתיים או שלוש שכבות שקופות למחצה עם מצבי מיזוג וטשטוש, ולכן הוא נקרא כאור ולא כמילוי. הייצוא הוא ל-Tailwind v4, ל-CSS רגיל, למשתנים או ל-CSS-in-JS. הניגודיות של הטקסט מעל הרקע נמדדת תוך כדי.
איך משתמשים
- 1בחרו רקע בגלריה, או סננו לפי קטגוריה ומצב רוח
- 2פתחו את השכבות וכווננו מצב מיזוג, טשטוש ושקיפות
- 3העתיקו את הקוד בפורמט שצריך ובדקו את ניגודיות הכותרת
הפרטים
- רקעים בקטלוג
- 224
- קטגוריות
- 9: של Codearia, אאורה, רשת, ערפילית, מנסרה, סורג, גרעיניות, זכוכית, זרימה
- פורמטי ייצוא
- Tailwind v4, CSS, משתנים, CSS-in-JS
- טכנולוגיה
- CSS נקי: שכבות, mix-blend-mode וטשטוש
- תלויות
- אין: בלי קנבס, בלי WebGL, בלי תמונות
- איפה רץ
- בדפדפן, בלי העלאה לשרת
שאלות נפוצות
למה גרדיאנט אחד נראה זול ואלה לא?
linear-gradient בודד הוא מילוי שטוח: העין קוראת את המעבר מיד וממשיכה הלאה. כל רקע כאן מערים כמה שכבות שקופות למחצה במצבים כמו soft-light ו-hard-light, ומעל זה טשטוש. השכבות מתערבבות זו בזו, והתוצאה אינה מעבר בין שני צבעים אלא אור על משטח.
זה מאט את העמוד?
לא. אין קנבס, אין WebGL ואין תמונות: הדפדפן מצייר את זה בכללי CSS רגילים. הדבר היחיד שכדאי לשים לב אליו הוא טשטוש גדול בנייד, כי טשטוש הוא עבודה של ה-GPU. בייצוא ערכי הטשטוש לרקע מסך מלא ולכרטיס שונים.
אפשר לשים טקסט מעל רקע כזה?
לפעמים כן ולפעמים לא, ורק מדידה אומרת מה מהם. הכלי מציג את הניגודיות של כותרת ושל טקסט גוף מעל הרקע הנבחר כמספר. רקע שבולע את הכיתוב שלו אינו שמיש, כמה שהוא יפה.
מאיפה הגיע הקטלוג?
משני מקורות. 206 מהם מ-Aura, פרויקט פתוח ברישיון MIT מאת CristianOlivera1, והקרדיט נמצא בפוטר של הכלי. ה-18 הנותרים נבנו אצלנו בפלטת Codearia ופותחים את הגלריה תחת הקטגוריה של Codearia. גם הייצוא ל-Tailwind v4, הפרומפט לסוכן, בדיקת הניגודיות והממשק הם שלנו.
