طريقة الاستخدام
- 1اختر النوع: خطي أو دائري أو مخروطي، واضبط الزاوية أو الشكل والمركز.
- 2انقر على الشريط لإضافة نقطة لون، واسحب المقابض لتحريكها.
- 3عدّل لون كل نقطة وموضعها وشفافيتها، أو ابدأ من تدرج جاهز.
- 4انسخ كود CSS أو قيمة Tailwind.
أنواع التدرج في CSS
linear-gradient ينتقل بين الألوان في خط مستقيم بالزاوية التي تحددها، فـ 90deg من اليسار إلى اليمين و180deg من الأعلى إلى الأسفل. radial-gradient ينتشر من مركز على شكل دائرة أو شكل بيضاوي، ويمكنك اختيار المركز من تسعة مواضع. conic-gradient يدور حول المركز كعقارب الساعة، ويُستخدم للمخططات الدائرية والعجلات اللونية.
نقاط الألوان والشفافية
لكل نقطة لون وموضع بالنسبة المئوية وشفافية؛ عند تقليل الشفافية تكتب الأداة اللون بصيغة hex من 8 خانات. زر «عكس» يقلب ترتيب الألوان، ويمكن حذف أي نقطة مع بقاء نقطتين على الأقل. تظهر المعاينة فوق خلفية مربعات لتوضيح الأجزاء الشفافة.
كود CSS وTailwind
يتضمن كود CSS سطر background بلون احتياطي هو لون النقطة الأولى، ثم سطر التدرج. ولمستخدمي Tailwind CSS تعرض الأداة قيمة مخصصة مثل bg-[linear-gradient(...)] مع استبدال المسافات بشرطة سفلية كما يتطلب Tailwind.
الأسئلة الشائعة
كيف أضيف تدرجًا لخلفية عنصر؟
انسخ الكود وضعه في قاعدة CSS للعنصر، مثل .hero { background: ... }.
هل تدعم المتصفحات conic-gradient؟
نعم، تدعمه كل المتصفحات الحديثة. سطر اللون الاحتياطي يظهر في المتصفحات القديمة جدًا.
كيف أجعل تدرجًا شفافًا؟
خفّض قيمة الشفافية لنقطة لون أو أكثر؛ يُكتب اللون بقناة ألفا تلقائيًا.
هل يمكن استخدامه مع Tailwind؟
نعم، انسخ القيمة المخصصة bg-[...] وضعها في class العنصر مباشرة.
النتائج غير مرضية؟
تواصل مع Webin Agency لمواقع سريعة متوافقة مع السيو، ومتاجر إلكترونية، وإدارة إعلانات Google.