مولّد تدرجات CSS
صمّم تدرج الخلفية بصريًا وانسخ كود CSS الجاهز للاستخدام. اسحب النقاط اللونية على الشريط، وانقر على الشريط لإضافة نقطة، وغيّر الزاوية أو المركز، واجعل الألوان شفافة. يتضمن الكود لونًا ثابتًا احتياطيًا للمتصفحات القديمة.
طريقة الاستعمال
- اختر خطيًا أو دائريًا أو مخروطيًا، أو ابدأ من قالب جاهز أو تدرج عشوائي.
- انقر على نقطة لتعديل لونها وشفافيتها وموضعها؛ اسحبها، أو انقر على الشريط لإضافة نقطة أخرى.
- انسخ كود CSS والصقه في قاعدة العنصر.
الأسئلة الشائعة
ما الفرق بين التدرج الخطي والدائري والمخروطي؟
التدرج الخطي يغيّر اللون على امتداد خط مستقيم بالزاوية التي تختارها. التدرج الدائري ينتشر من مركز على شكل دائرة أو قطع ناقص. التدرج المخروطي يدور حول مركز مثل عقارب الساعة، وهو مفيد لعجلات الألوان والرسوم الدائرية.
هل تعمل تدرجات CSS في جميع المتصفحات؟
نعم. تعمل التدرجات الخطية والدائرية والمخروطية في جميع الإصدارات الحالية من Chrome وEdge وFirefox وSafari دون بادئات. أول سطر للخلفية هو لون عادي تستخدمه المتصفحات القديمة جدًا فقط.
كيف أصنع خطوطًا متوازية؟
ضع نقطتين بلون واحد عند بداية كل خط ونهايته، فيتغير اللون فجأة بدل أن يمتزج، ثم فعّل خيار التكرار. القالب الأخير مثال على ذلك.
🏷️ مولّد الميتا تاغ (Meta Tags)
🖼️ مولّد Open Graph
🔗 منشئ روابط UTM
🔲 مولّد ظل الصندوق CSS (box-shadow)