مولِّد تدرجات CSS
امزج من لونين إلى خمسة في تدرجات CSS خطية أو شعاعية أو مخروطية، مع معاينة حية وكود جاهز للّصق ولوحات ألوان متناسقة بنقرة واحدة.
Color stops
Palettes
background-color: #7C3AED; /* fallback for old browsers */ background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
0° points up and 90° to the right — the angle runs clockwise.
تعمل هذه الأداة بالكامل داخل متصفحك. بياناتك لا تغادر جهازك أبداً — لا يتم رفعها إلى أي خادم.
طريقة الاستخدام
- 1اضبط لونين إلى خمسة، أو ابدأ من لوحة ألوان جاهزة.
- 2اختر نوع التدرج ثم الزاوية أو الشكل؛ وثبّت المواضع إن أردت.
- 3انسخ كتلة CSS والصقها في ورقة الأنماط.
مولِّد تدرجات CSS
اختر من لونين إلى خمسة، ثم اختر تدرجًا خطيًا أو شعاعيًا أو مخروطيًا واسحب الزاوية — تتحدث المعاينة أثناء الكتابة ويبقى كود CSS على بعد نسخة واحدة. اترك موضع أي لون فارغًا ليوضع تلقائيًا كما يفعل CSS، أو حدّد نسبًا مئوية دقيقة لتحصل على فواصل قاطعة ومزج مُزاح عن المركز.
الناتج كتلة إنتاج حقيقية: سطر لون صلب احتياطي للمتصفحات القديمة، وسطر ببادئة -webkit- لمحركات WebKit القديمة، والصيغة القياسية في الأخير. وزر التنسيق العشوائي يدير درجات ألوان لوحتك في فضاء HSL فتبقى كل خلط متوازنة لا صارخة.
الأسئلة الشائعة
لماذا يتضمن كود CSS سطرًا ببادئة -webkit-؟
هذا سطر توافق للمتصفحات القديمة بمحرك WebKit (حقبة Safari 5–6 تقريبًا) التي كانت تفهم -webkit-linear-gradient فقط. كل المتصفحات خلال العقد الأخير تقرأ السطر القياسي، فيمكنك حذف السطر المسبوق إن لم تكن تدعم تلك الإصدارات — إبقاؤه يكلف سطرًا واحدًا وحذفه لا يكلف شيئًا.
ماذا تعني الزاوية في التدرج الخطي؟
هي اتجاه سير التدرج، تُقاس باتجاه عقارب الساعة انطلاقًا من الأعلى: 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل. وتعيد الأداة ضبط أي زاوية (−45 تصبح 315)، كما أن قاعدة الاتجاه المعاكس في الصيغة القديمة معالجة مسبقًا في سطر -webkit-.
أدوات ذات صلة
فاحص التباين
احسب نسبة التباين وفق WCAG بين لونين مع نتائج AA وAAA للنص العادي والكبير، ومعاينة حية تريك النتيجة بعينك. كل شيء يعمل داخل متصفحك.
كل الأدوات →
محوّل الألوان
الصق لوناً بصيغة hex أو rgb() أو hsl() واحصل على الصيغ الثلاث مع صف جاهز من التفتيحات والتغميقات لنظام تصميمك.
كل الأدوات →
منتقي الألوان
اختر لوناً من العينة أو أمسك واحداً من شاشتك مباشرة عبر واجهة EyeDropper — hex وRGB وHSL تُنسخ بنقرة واحدة.
كل الأدوات →
إطار للصور
أضف إطارًا بلون صلب أو شفافًا حول صورة واحدة أو دفعة كاملة — معاينة حية، وإخراج PNG أو JPG، وكل شيء يجري في متصفحك.
كل الأدوات →
تضمين هذه الأداة
أضف هذه الأداة إلى موقعك بسطر واحد — تعمل في متصفح الزائر.
<iframe src="https://zoyku.com/ar/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>