مولّد تدرّج CSS

حرّك المؤشّرات وراقب اللوحة في الأعلى تتغيّر معها. حين يعجبك الشكل، انسخ السطر وألصقه في ملف الأنماط — لا حاجة إلى شيء آخر.

الزاوية: 90°

تنطبق الزاوية على التدرّج الخطي والمخروطي؛ أمّا الشعاعي فينتشر من المركز.

نقاط اللون

CSS

مجانًا
ملفاتك لا تغادر جهازك
بدون تسجيل
بلا حد لعدد الملفات

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

اختر النوع: الخطي يسير على مستقيم، والشعاعي ينتشر من المركز، والمخروطي يدور حوله.
اضبط الزاوية وحرّك النقاط إلى حيث ينبغي أن تلتقي الألوان.
أضف نقاطًا إن لم يكفِ لونان، أو اضغط «فاجئني».
انسخ سطر CSS أسفل المعاينة.

معلومات مفيدة

لماذا تقع المعاينة على رقعة شطرنج

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

تُرتَّب النقاط قبل كتابة الكود

لا يعيد CSS ترتيب نقاط اللون نيابةً عنك: نقطة عند 70 % مكتوبة قبل أخرى عند 30 % تدفع المتصفّح إلى تثبيت الثانية، فيفقد التدرّج لونًا في صمت. ترتّب الأداة النقاط حسب الموضع أثناء بناء السطر، لذا لا يفسد السحب بمؤشّر أمام جاره النتيجة أبدًا.

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

ما الفرق بين الأنواع الثلاثة؟

التدرّج الخطي يسير على مستقيم ويقبل زاوية: 90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل. والشعاعي ينتشر دوائر من المركز، ويناسب التوهّج والإضاءة الموجّهة. والمخروطي يدور حول نقطة كعقرب الساعة، ومنه تُبنى الرسوم الدائرية وعجلات الألوان.

كيف أصنع تدرّجًا فيه شفافية؟

اختر لونًا وأنقص عتامته في المنتقي إن كان متصفّحك يدعم قناة ألفا، أو عدّل السطر المنسوخ يدويًا: تصلح ‎rgba(31, 95, 214, 0)‎ نقطةً تمامًا كلون معتم. التلاشي إلى الشفافية أنفع من التلاشي إلى الأبيض لأنه ينجح فوق أي خلفية.

هل أستخدمه لونًا للنص؟

نعم، بسطرين إضافيين: ضع التدرّج في background-image ثم أضف ‎background-clip: text‎ و‎color: transparent‎. يحتفظ النص بشكله ويظهر التدرّج من خلال الحروف.

لماذا تبدو الزاوية نفسها مختلفة في الوضع الشعاعي؟

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

الفئات

الأدوات الأكثر استخدامًا