تدرّج هادئ لقسم hero
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}تدرّج قطري بلونين. مظهر hero الكلاسيكي لشركات الـ SaaS المستقلّة — مريح للعين ومناسب للنصوص فوقه.
مولد تدرجات CSS
صمّم تدرجات CSS بصريًا مع خرج كود مباشر.
Last updated
معاينة2 نقاط
نقاط اللون
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);ما هو مولّد تدرّجات CSS؟
مولّد تدرّجات CSS هو محرّر بصري لدوال linear-gradient و radial-gradient و conic-gradient في CSS. يوفّر عليك كتابة نقاط الألوان يدوياً: اسحب الألوان على الشريط، تابع تحديث المعاينة، وانسخ كود CSS جاهز للإنتاج تلصقه مباشرة في ملف الأنماط.
التدرّجات حاضرة في كلّ مكان في واجهات اليوم: أقسام الـ hero، طبقات البطاقات، حالات الأزرار، تأثيرات التوهّج، لمسات الوضع الداكن، هياكل التحميل، والحدود الزخرفية. إتقان قراءة وكتابة التدرّج يدوياً يجعلك أسرع — لكن المولّد البصري لا يُضاهى حين تريد تجريب فكرة بسرعة.
تدعم CSS ثلاثة أنواع من التدرّجات. *الخطّي* يسير على خطٍّ مستقيم بأي زاوية. *الدائري* ينطلق من نقطة على شكل دائرة أو قطع ناقص. *المخروطي* يدور حول نقطة المركز كعقارب الساعة. لكلٍّ منها استخداماته الخاصة — ويمكنك دمج عدّة تدرّجات على خلفية واحدة.
ما الذي ستتعلّمه أثناء تصميم التدرّجات
- يُعرَّف التدرّج بـ *الاتجاه* (أو الشكل) و*نقاط الألوان* — ألوان مع مواضع اختيارية.
- وضع نقطتَي لون عند نفس الموضع يُنتج *حافّة حادّة*، مفيدة للخطوط أو الخلفيات المقسومة.
- الفضاءات اللونية الحديثة مثل
oklchتُنتج تدرّجات أنعم وأكثر اتّساقاً بصرياً مقارنةً بـrgbأوhsl.
كيف تبني تدرّج CSS خطوة بخطوة
اختر نوع التدرّج
اختَر linear للانتقال المستقيم بين الألوان، أو radial للتلاشي الدائري، أو conic للدوران حول نقطة مركزية.
حدّد الزاوية أو الموضع
في linear، اختر زاوية بالدرجات (
0degيعني من الأسفل إلى الأعلى في CSS). أمّا في radial و conic فحدّد موضع المركز.أضف نقاط الألوان ورتّبها
أضف ما تشاء من الألوان. اسحب كلّ نقطة على الشريط لتغيير موضعها. وضع نقطتين عند نفس الموضع يُنشئ حافّة حادّة.
عاين على شكل حقيقي
بدّل بين معاينة hero بعرض كامل، وبطاقة، وزر لترى كيف يظهر التدرّج بنِسَب أبعاد مختلفة.
انسخ الـ CSS
انسخ تصريح
backgroundالجاهز للإنتاج والصقه في ملف الأنماط.
مرجع سريع لتدرّجات CSS
دوال التدرّج الثلاث وما يُكتب داخلها. المرجع الكامل على MDN: linear-gradient، radial-gradient، conic-gradient.
| الدالة | ما الذي تفعله | مثال |
|---|---|---|
linear-gradient | انتقال لوني على خطّ مستقيم | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | ألوان تنطلق من نقطة | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | ألوان تدور حول نقطة مركزية | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | نمط خطوط متكرّر | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| نقطة لون | لون مع موضع اختياري | #6c8cff 25% |
| نقطة حادّة | نفس الموضع مرّتين ← حافّة حادّة | #000 50%, #fff 50% |
| تدرّجات متعدّدة | متراكمة على عنصر واحد | background: g1, g2, g3; |
أمثلة تدرّجات CSS لتجرّبها
بقعة ضوء دائرية
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}ضع بقعة ضوء دائرية شفّافة فوق لون صلب لتُحاكي مصدر إضاءة ناعم — مثالية للبطاقات في الوضع الداكن.
خطوط بحوافّ حادّة
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}نقطتا لون عند نفس الموضع تُنتجان حافّة حادّة. وتغليف ذلك بـ repeating-linear-gradient يُكرّر النمط على كامل المساحة.
أخطاء شائعة في تدرّجات CSS
- الإفراط في عدد نقاط الألوان — ثلاث أو أربع نقاط تكفي عادةً، والزيادة تُشوّش النتيجة في أغلب الأحيان.
- نسيان أنّ
0degفي تدرّجات CSS يعني من الأسفل إلى الأعلى (بعكس كثير من أدوات التصميم التي تجعل 0° إلى اليمين). - وضع نصّ فوق تدرّج عالي التباين دون اختبار قابلية القراءة عند طرفَي التدرّج — تذكّر معايير تباين WCAG.
أسئلة شائعة حول تدرّجات CSS
كيف أُنشئ تدرّج CSS؟
استخدم
linear-gradient أو radial-gradient أو conic-gradient كقيمة لخاصية background أو background-image. كلّ دالة تأخذ اتجاهاً (أو مركزاً) وقائمةً من نقاط الألوان.ما الفرق بين التدرّج الخطّي والدائري والمخروطي؟
التدرّج الخطّي ينقل الألوان على خطّ مستقيم. التدرّج الدائري يبثّ الألوان من نقطة على شكل دائرة أو قطع ناقص. أمّا التدرّج المخروطي فيُدوّر الألوان حول نقطة مركزية كعقارب الساعة.
هل يمكنني تحريك تدرّج CSS؟
المتصفّحات لا تُداخل بين صور التدرّجات بسلاسة. الحيل المعتادة هي تحريك
background-position للحصول على تدرّج متحرّك، أو الانتقال بين طبقتَي تدرّج عبر الشفافية، أو تحريك متغيّرات CSS المخصّصة المستخدمة كنقاط ألوان.لماذا يظهر تدرّجي مُشرَّطاً (banding)؟
يحدث التشريط حين تنتشر خطوات لونية قليلة جداً على مساحة واسعة. أضف نقاط لون وسطية، أو انتقل إلى فضاء لوني إدراكي مثل
oklch، أو ضع طبقة ضوضاء خفيفة (dithering) فوق التدرّج.هل تدرّجات CSS مدعومة في جميع المتصفّحات؟
التدرّجات الخطّية والدائرية مدعومة بشكل شامل. والتدرّجات المخروطية مدعومة في كلّ المتصفّحات الحديثة. للمتصفّحات القديمة جداً يُستحسن إضافة
background-color صلب كبديل احتياطي قبل تصريح التدرّج.