مولّد تدرجات CSS — خطية وشعاعية ومخروطية مع معاينة مباشرة

ما الذي تفعله الأداة

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

طريقة الاستخدام

ابدأ من قالب جاهز أو احتفظ بالتدرج النموذجي.
اختر النوع. للتدرجات الخطية والمخروطية زاوية، وللتدرجات الشعاعية والمخروطية مركز تحرّكه عبر المركز X والمركز Y.
عدّل نقاط الألوان: غيّر اللون بالمنتقي أو اكتب أي لون CSS، واسحب الموضع لتحريك النقطة، واستخدم + إضافة نقطة لإدراج نقطة في أوسع فجوة، وعكس لقلب الترتيب.
فعّل تكرار لتكرار التدرج وصنع خطوط وحلقات.
انسخ الشيفرة من بطاقة CSS، ويمكنك إضافة لون احتياطي ثابت للمتصفحات القديمة جدًا.

يعرض مربع CSS التدرج في الأسفل قيمة التدرج ويمكن تحريره: الصق تدرجًا من ملف الأنماط أو أداة التصميم وستقرؤه عناصر التحكم تلقائيًا.

مثال

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

نصائح لتدرجات جميلة

البساطة أفضل. لونان متجاوران (أزرق إلى بنفسجي، برتقالي إلى وردي) يمتزجان بنعومة أكبر من الألوان المتضادة التي قد تصبح رمادية باهتة في المنتصف.
أضف نقطة وسطى للتحكم في المزج. نقطة ثالثة أفتح قليلًا من جاراتها تعطي لمعانًا ناعمًا.
النقاط الحادة تصنع أشكالًا. النقاط في الموضع نفسه تصنع حوافًا حادة: الخطوط والأعلام وأشرطة التقدم والمخططات الدائرية كلها تستخدم هذه الحيلة.
الاتجاهات. to right تساوي 90deg وto bottom (الافتراضي) تساوي 180deg. تُقاس الزوايا باتجاه عقارب الساعة بدءًا من الأعلى.
النص فوق التدرج يجب أن يبقى مقروءًا على امتداد التدرج كله. افحص أفتح نقطة وأغمقها مقابل لون النص بأداة فحص التباين.

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

› ما الفرق بين التدرجات الخطية والشعاعية والمخروطية؟

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

› كيف أحصل على خطوط حادة بدلًا من مزج ناعم؟

اجعل لنقطتين متجاورتين الموضع نفسه، مثل red 50% وblue 50%. عندها يتغير اللون فورًا عند تلك النقطة. فعّل خيار التكرار ليتكرر النمط، وهكذا تُصنع الخطوط في CSS.

› هل يمكنني استخدام ألوان شفافة؟

نعم. اكتب أي لون CSS في النقطة، بما في ذلك rgba() وhsl() مع الشفافية وhex من 8 خانات وtransparent. يحتفظ منتقي الألوان بالشفافية التي حددتها، وتعرض المعاينة نقشة رقعة شطرنج خلف المناطق الشفافة.

› هل ما زلت بحاجة إلى بادئات المتصفحات أو لون احتياطي؟

لا حاجة إلى البادئات: كل المتصفحات الحالية تدعم التدرجات الخطية والشعاعية والمخروطية دون بادئات. اللون الاحتياطي الثابت الاختياري مهم فقط للمتصفحات القديمة جدًا أو للأدوات التي تقرأ background-color، مثل بعض برامج البريد الإلكتروني.