منظومة Volade — أداة ويب

مولّد تدرّجات CSS مجاني عبر الإنترنت

أنشئ تدرّجات CSS خطية وشعاعية وزاويّة في ثوانٍ: اختر النوع، واضبط الزاوية ونقاط توقف الألوان، وعاين النتيجة فوريًا، ثم انسخ الكود الجاهز للصق. بلا حساب وبلا إرسال — كل شيء يتمّ في متصفّحك.

تمّ التحديث في 12 أكتوبر 2026

أنشئ تدرّجي تسجيل الدخول
لا تُرسل أي بيانات الخصوصية في التصميم ابدأ مجانًا
الأداة

اصنع تدرّجك وانسخ CSS

نوع التدرّج والزاوية والألوان والمواقع: كلّه يُحدَّث فوريًا في المعاينة. كود CSS جاهز في الأسفل.

مولّد تدرّجات CSS

عبر الإنترنت التصميم والإبداع
تسجيل الدخول
إنشاء محلي — لا يتلقّى Volade شيئًا جاهز
كود CSS
0نقاط التوقف
0°الزاوية
0محارف
أمثلة سريعة:
0,0 0تعليق جميع الأدوات
مجاني أم Premium؟

مولّد تدرّجات CSS مجاني وغير محدود: أنشئ ما تشاء من التدرّجات بلا حساب. يُبنى التدرّج في متصفّحك — دون أي خادم.

3 أنواع: خطّي، شعاعي، زاويّمجاني
زاوية وموضع الأصل ونقاط توقف الألوان قابلة للضبطمجاني
معاينة فورية وكود CSS يُنسخ بنقرةمجاني
منظومة Premium الكاملة (CMS، مكتب، سكربتات، API)Premium
اكتشف Premium
الميزات

مولّد تدرّجات CSS متكامل

خطّي وشعاعي وزاويّ: عائلات CSS الثلاث

انتقل من عائلة إلى أخرى بنقرة واحدة: يُعاد تشكيل مجموعة النقاط نفسها تلقائيًا إلى linear-gradient() أو radial-gradient() أو conic-gradient(). تُعرض الزاوية وموضع الأصل أو تُخفى حسب النوع المختار.

اختر نوعي

زاوية دقيقة ونقاط توقف ألوان حرّة تمامًا

اضبط الزاوية من 0 إلى 360°، وحرّك كل نقطة توقف على كامل المدى 0–100%، وأضف نقاطًا بالقدر الذي تحتاجه. القيمة السداسية لكل نقطة قابلة للتحرير بلوحة المفاتيح لتلصق لونًا من هويّتك البصرية.

ضبط دقيق للألوان

معاينة فورية وكود CSS جاهز للصق

كل تعديل يظهر فورًا في المعاينة الكبيرة. الكود الكامل — background: linear-gradient(…); — يُكتب في أسفل الأداة. بنقرة على «نسخ» ينتقل إلى الحافظة، جاهزًا لـ CSS أو JSX أو التنسيق المضمن.

انسخ CSS الخاص بي

خاص: يبقى تدرّجك على جهازك

يتمّ الإنشاء كاملًا في متصفّحك: لا يُرسَل شيء ولا يُخزَّن شيء على خادم. تبقى آخر عمليّة إنشاء محفوظة محليًا على جهازك لتكمل من حيث توقّفت — مثالي للتجريب على هويّتك البصرية.

سياسة الخصوصية
كيف يعمل

أنشئ تدرّج CSS في ثلاث خطوات

اختر النوع

الخطّي لخلفية اتجاهية، الشعاعي لهالة، والزاويّ لحلقة. الزر المُفعَّل يعيد تشكيل الكود فورًا ويعرض الإعدادات المناسبة للعائلة المختارة.

اضبط الزاوية والألوان

حرّك مؤشّر الزاوية، وحدّد موضع الأصل (X/Y) للتدرّجات الشعاعية والزاويّة، ثم اضبط كل نقطة توقف: منتقي الألوان، القيمة السداسية والموضع بالنسبة المئوية. أضف نقاطًا لانتقالات أغنى.

انسخ كود CSS

تظهر السطرة كاملة في أسفل الأداة. انقر «نسخ» ثم الصقها في ورقة التنسيق أو المكوّن أو المحرّر — يظهر التدرّج بنفس الشكل أينما كان CSS مدعومًا.

FAQ

أسئلة شائعة حول تدرّجات CSS

ما هو تدرّج CSS؟
تدرّج CSS هو انتقال تدريجي بين لونين أو أكثر، يرسمه المتصفّح مباشرةً عبر الدوال linear-gradient() أو radial-gradient() أو conic-gradient(). وعلى عكس الصورة، التدرّج متجهيّ: يبقى حادًّا في كل الدقّات، ويزن بضعة عشرات البايتات، ويُضبط بالكامل بـ CSS.
ما الفرق بين التدرّج الخطّي والشعاعي والزاويّ؟
التدرّج الخطّي يتقدّم على امتداد خط مستقيم (الزاوية بالدرجات): مثالي لخلفية الترويسة أو زر. التدرّج الشعاعي ينطلق من نقطة مركزية ويتّسع دائرةً أو بيضاويًا: مثالي لهالة أو خلفية رئيسية. التدرّج الزاويّ يدور حول نقطة، كعقربَي الساعة: مثالي لحلقة أو مخطط دائري أو تأثير «إطار».
كيف أتحكّم في زاوية التدرّج الخطّي؟
تُعبَّر عن الزاوية بالدرجات (deg) مباشرةً بعد linear-gradient( : تشير 0deg إلى الأعلى، و90deg إلى اليمين، و180deg إلى الأسفل. تُنشئ الأداة القيمة تلقائيًا من موضع مؤشّر الزاوية — يكفيك نسخ الكود.
ما هي نقاط توقف الألوان (color stops)؟
تربط نقطة توقف بين لون وموقع على التدرّج (بالنسبة المئوية). نقطتان تكفيان لتدرّج بسيط؛ وإضافة نقاط أكثر تُنشئ أشرطة أو انتقالات أنعم أو تأثيرات متعددة الألوان. يمكنك تحريك كل نقطة بمؤشّر الموضع وإضافة النقاط أو حذفها بنقرة.
كيف أستخدم التدرّج المُولَّد في CSS الخاص بي؟
انسخ السطرة الناتجة من منطقة الإخراج ثم الصقها في ورقة التنسيق أو في تنسيق مضمن: background: linear-gradient(...); . يمكن استخدامها أيضًا كـ color-image لخاصية mask، أو كصورة مؤقّتة، أو كقيمة background-image فوق لون بديل.
هل تعمل تدرّجات CSS على جميع المتصفّحات؟
نعم: يدعم linear-gradient وradial-gradient جميع المتصفّحات الحديثة منذ سنوات عدّة، بما في ذلك الجوّال. كما يدعم conic-gradient الإصدارات الحديثة من Chrome وFirefox وSafari وEdge. أمّا المتصفّحات القديمة فاكتفِ بلون سادة كبديل.
هل يمكنني وضع تدرّج فوق صورة؟
نعم: في خاصية background المختصرة، اذكر التدرّج قبل الصورة — background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. يظهر التدرّج فوق الصورة؛ وتحكّم قيم rgba() في شفافية الطبقة.
هل الأداة خاصة ومجانية؟
نعم: يتمّ الإنشاء كاملًا في متصفّحك، ولا يُرسَل شيء إلى خادم ولا يُخزَّن شيء خارج جهازك (إلا آخر عمليّة في localStorage من أجل الراحة). الأداة مجانية بالكامل وغير محدودة ومتاحة بلا حساب، على الحاسوب والجوّال.
الدليل الكامل

كل ما يخصّ تدرّجات CSS

إنّ تدرّج CSS أصبح الوسيلة الأخفّ والأكثر مرونة لتزيين خلفية أو زر أو بطاقة. لم يعد الأمر يحتاج إلى تصدير صورة PNG من محرّر الصور: يحسب المتصفّح الانتقال بين ألوانك متجهيًا، وبضعة عشرات البايتات فقط. مولّد تدرّجات CSS الخاص بـ Volade يُنتج الكود الدقيق — الزاوية، نقاط التوقف، موضع الأصل — أثناء تكوين التدرّج على الشاشة.

linear-gradient: التدرّج الاتجاهي

الدالة linear-gradient() تستقبل زاوية يليها نقاط التوقف: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). الزاوية 0deg تدلّ على الأعلى، 90deg يمينًا، 180deg أسفلًا. وبدون زاوية يبدأ المتصفح من الأعلى إلى الأسفل. هذه أكثر الصيغ استخدامًا للترويسات وأزرار الدعوة إلى الإجراء وشرائح الأقسام.

radial-gradient: الهالة والبيضاوي

الدالة radial-gradient() تنطلق من نقطة (افتراضيًا المركز) ويتّسع دائرةً أو بيضاويًا. يُكتب موضع الأصل at X% Y% : radial-gradient(circle at 50% 50%, …). مثالي لهالة خلف عنوان، أو خلفية رئيسية تصبّغ مركزها، أو ظلّ ناعم اصطناعي. تقدّم الأداة مؤشّري X وY لضبط الأصل بدقة البكسل.

conic-gradient: الدوران حول نقطة

الدالة conic-gradient() يدور حول نقطة، كعقربَي الساعة. تُكتب هكذا conic-gradient(from 90deg at 50% 50%, …) وتتيح إنشاء حلقات أو عدّادات دائرية أو حدود ملوّنة أو تأثيرات موّاجة. تشغل كل نقطة قطاعًا زاويًا: بوضع ألوان متعدّدة ترسم مخططًا دائريًا بـ CSS دون أي صورة.

نقاط توقف الألوان (color stops)

كل نقطة توقف تربط بين لون وموضع بالنسبة المئوية: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. المواقع المتطابقة للونين تُنتج انتقالًا حادًّا (حافة صلبة)؛ والمواقع البعيدة تُنتج تلاشيًا تدريجيًا. أكثر من نقطتَي توقف تتيح لوحات ألوان متعدّدة أو أشرطة أو محاكاة للمواد (معدن، صدف، شفق قطبي).

طبّق تدرّجًا وجهّز بديلًا

في الاختصار background، يهمّ الترتيب: طبقة الأمام أولًا. التعتيم الداكن فوق الصورة يُكتب هكذا: background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. ضع دائمًا لونًا سادة كبديل (background-color) للمتصفّحات القديمة جدًا أو أثناء تحميل الصورة.

أفضل ممارسات الأداء

يُعاد حساب تدرّج CSS مع كل تغيير في الحجم: التزم بعدد معقول من النقاط (2 إلى 5 تكفي في 90% من الحالات) وتجنّب الطبقات المتعدّدة فوق المساحات الضخمة في الجوّال. فضّل قيمًا السداسية أو HSL مستقرّة، وثبّت الزاوية فور اعتماد التصميم لتفادي الاختلافات الطفيفة بين المتصفّحات.

تدرّجات بهوية Volade

لبناء لوحة متماسكة قبل اشتقاق التدرّجات، اجمع بين مولّد لوحات الألوان و منتقي الألوان : حدّد ألوان علامتك التجارية ثم الصقها هنا كنقاط توقف. تُنسخ النتيجة مباشرة إلى CSS أو نظام التصميم أو السِمّة — على الحاسوب والجوّال، بلا حساب وبلا إرسال بيانات.

ترخيص واحد، النظام الاحترافي بأكمله المتصفح · CMS · سطح المكتب · الجوال · السكربتات · API · أدوات · Database
ترخيص واحد، كل شيء الترقية إلى الاحترافي تسجيل الدخول