ابنِ تدرجات CSS خطية وشعاعية ومخروطية من الصفر بتحكم متعدد النقاط قابل للسحب وبإعدادات مسبقة منتقاة. انسخ CSS جاهزاً للصق فوراً.

معاينة مباشرة
إعدادات مسبقة
نوع التدرج
الزاوية
°
نقاط التوقف
اسحب مقبضاً لتحريك نقطة توقف، أو انقر على الشريط لإضافة واحدة. اختر نقطة توقف لتعديل لونها.
نقطة التوقف المحددة
%
CSS
background: ;

كل شيء يُحسَب مباشرةً في متصفحك — لا تسجيل، مجاني تماماً.


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

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

تمنحك القوالب الجاهزة نقطة انطلاق قوية عندما لا تريد البدء من صفحة فارغة، وتجعل إجراءات النقرة الواحدة — عشوائي، عكس، دوران 45° — الاستكشاف سريعًا. كود CSS المُنتج مرئي دائمًا ويبقى متزامنًا مع المعاينة، لذا ما تنسخه هو بالضبط ما رأيته.

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

كيفية استخدام مولّد التدرجات

  1. اختر نوع تدرج: خطي، شعاعي أو مخروطي.
  2. ابدأ من قالب جاهز أو انقر "عشوائي" للحصول على نقطة انطلاق فورية.
  3. اسحب مقابض نقاط التوقف لتموضع الألوان، انقر على الشريط لإضافة نقاط توقف، وحرّر لون كل نقطة.
  4. اضبط الزاوية، أو استخدم "عكس" و"دوران 45°" لإعادة توجيه المزيج.
  5. انسخ قاعدة CSS أو قيمة الخلفية والصقها في مشروعك.

الأسئلة الشائعة

نعم. الأداة تعمل بالكامل من جانب العميل — دون تسجيل ولا رصيد ولا حدود على عدد التدرجات التي تبنيها أو تنسخها.

يمزج التدرج الخطي الألوان على طول خط مستقيم بالزاوية التي تختارها. يشع التدرج الشعاعي من نقطة مركزية في دوائر. يجتاح التدرج المخروطي الألوان حول نقطة مركزية مثل مخطط دائري، وهو رائع لعجلات الألوان وحلقات التقدم.

يحتاج التدرج نقطتي توقف على الأقل، ويمكنك الاستمرار في النقر على الشريط لإضافة المزيد. كل نقطة توقف لها لونها وموضعها القابل للسحب الخاصين بها، لذا فإن بناء مزيج معقد متعدد الألوان أمر سهل.

التدرجات الخطية والشعاعية مدعومة في كل مكان. التدرجات المخروطية مدعومة في جميع المتصفحات الحديثة لكن ليس في المتصفحات القديمة جدًا، لذا وفّر لون خلفية احتياطيًا إذا كنت بحاجة لدعم الإصدارات القديمة.

نعم — استخدم أداة مولّد التدرج من صورة المرافقة، التي تستخرج الألوان السائدة لصورة مرفوعة وتحوّلها إلى نقاط توقف تدرج قابلة للتحرير. هذه الأداة هي النظير الذي يبدأ من الصفر.

شارك هذا

عمليات البحث الشائعة
مولد تدرج صانع تدرج CSS مولد تدرج خطي صانع تدرج شعاعي تدرج مخروطي CSS مولد تدرج مجاني
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.