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

أنشئ تدرّج CSS خطّيًا أو شعاعيًا أو مخروطيًا بمواضع ألوان مخصّصة وزاوية، وعاين النتيجة مباشرةً، وانسخ قاعدة background الجاهزة للّصق.

جارٍ تحميل الأداة…

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

ما هي مولّد تدرّجات CSS؟

مولّد تدرّجات CSS أداة مجانية على الإنترنت لمصمّمي الويب ومطوّري الواجهات الأمامية الذين يحتاجون تدرّجًا سريعًا دون كتابة الصياغة يدويًا. اختر تدرّجًا خطّيًا أو شعاعيًا أو مخروطيًا، واضبط الزاوية بالدرجات للنوعين الخطّي والمخروطي، وحدّد مواضع الألوان بلون HEX ونسبة موضع مئوية لكلٍّ منها. أثناء التحرير تعرض المعاينة المباشرة النتيجة وتتحدّث قاعدة CSS background المطابقة فورًا لتنسخها مباشرةً إلى ورقة الأنماط. استخدمه لتصميم الأزرار وخلفيات الأبطال والبطاقات والطبقات العلوية، أو لتتعلّم كيف تعمل الدوال linear-gradient() وradial-gradient() وconic-gradient().

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

  1. اختر نوع التدرّج: خطّي أو شعاعي أو مخروطي.
  2. للتدرّج الخطّي أو المخروطي، اضبط الزاوية بالدرجات (0-360)؛ أما الشعاعي فيستخدم دائرة متمركزة ويتجاهل الزاوية.
  3. حرّر كل موضع لون: اكتب أو اختر لون HEX واضبط موضعه كنسبة مئوية (0-100).
  4. انقر على إضافة موضع لإدراج لون آخر، أو على أيقونة سلة المهملات لإزالة موضع (يُحتفَظ بموضعين على الأقل).
  5. راقب تحديث مربّع المعاينة المباشر، ثم انسخ قاعدة CSS background المُولَّدة بزر النسخ.

أمثلة

تدرّج خطّي بسيط بلونين

المدخل

خطّي، 90deg، ‏#4f86f7 عند 0% و‏#9333ea عند 100%

المخرج

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

تدرّج شعاعي بثلاثة مواضع

المدخل

شعاعي، مواضع ‏#ffffff 0%، ‏#4f86f7 50%، ‏#1e3a8a 100%

المخرج

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

تدرّج مخروطي لعجلة ألوان

بدّل النوع إلى مخروطي، واضبط زاوية البداية، وأضِف عدّة مواضع على نقاط متباعدة بانتظام لتدوير الألوان حول نقطة مركزية — مفيد للعيّنات الشبيهة بالمخطّط الدائري أو مؤشّرات التحميل الدوّارة.

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

ما أنواع التدرّجات المدعومة؟
ثلاثة: linear-gradient (بزاوية بالدرجات)، وradial-gradient (دائرة متمركزة)، وconic-gradient (بزاوية بداية). بدّل بينها بمفتاح النوع ويتحدّث CSS فورًا.
كيف تعمل مواضع الألوان والمواقع؟
لكل موضع لون ونسبة موقع مئوية من 0 إلى 100. تُكتَب المواضع في CSS بالترتيب الذي تظهر به في القائمة، تمامًا كما يفسّرها المتصفّح، فتتحكّم في الترتيب مباشرةً. يمكنك إضافة مواضع بزر إضافة موضع وإزالتها حتى حدٍّ أدنى قدره اثنان.
هل يمكنني اختيار الألوان بصريًا بدل كتابة HEX؟
نعم. انقر على رقاقة اللون الصغيرة بجوار كل موضع لفتح منتقي الألوان الأصلي في متصفّحك، أو اكتب قيمة HEX مثل ‏#4f86f7 مباشرةً في حقل اللون. تتحدّث المعاينة وCSS مع كل تغيير تجريه.
لماذا يختفي حقل الزاوية في التدرّجات الشعاعية؟
يُرسَم التدرّج الشعاعي هنا كدائرة متمركزة لا تستخدم زاوية، لذا يظهر حقل الزاوية فقط للنوعين الخطّي والمخروطي حيث يغيّر الاتجاه.
هل تُرفَع ألواني أو CSS إلى أي مكان؟
لا. يُبنى التدرّج بالكامل داخل متصفّحك بحسابات محلّية للسلاسل النصّية والألوان — ولا تُرسَل أي ألوان أو CSS أو إعدادات إلى أي خادم على الإطلاق، فيعمل دون اتصال ويحافظ على خصوصية عملك.

أدوات ذات صلة

تحويل الكود إلى صورة

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

أداة فحص تباين الألوان

افحص نسبة تباين WCAG بين لون أمامي ولون خلفية بصيغة HEX وتعرّف على ما إذا كانت تجتاز المستويين AA وAAA لكل من النص العادي والنص الكبير.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس درجات بأسلوب Tailwind من 50 إلى 950، بالمزج نحو الأبيض والأسود، مع عيّنة لونية لكل خطوة وقيمة HEX قابلة للنسخ.