النقاط الرئيسية
- 01جميع أنواع التدرج الثلاثة في CSS — خطي وشعاعي وقياسي — مدعومة مع معاينة حية.
- 02أضف ما يصل إلى ستة نقاط ألوان، لكل منها موضع لون مستقل.
- 03الإخراج هو إعلان خلفية كامل جاهز للصق في أي ورقة أنماط.
- 04لا توجد حسابات، ولا تثبيت، ولا شيء تم تحميله — كل شيء يعمل في متصفحك.
لماذا نستخدم منشئ تدرج بصري؟
تصبح كتابة تدرجات CSS باليد مملة بسرعة. الصيغة قابلة للقراءة بمجرد معرفتها، لكن اختيار مواضع التوقف الدقيقة والألوان بدون معاينة بصرية يحول قراراً تصميماً بسيطاً إلى محاولة وخطأ في DevTools. يتيح لك المنشئ رؤية النتيجة في الوقت الفعلي وتصدير الكود النظيف في اللحظة التي يبدو بها صحيحاً.
تدعم هذه الأداة جميع أنواع التدرج الحديثة الثلاثة. الخطي هو الامتزاج الاتجاهي الكلاسيكي الذي ستستخدمه لخلفيات البطل والأزرار. ينتشر الشعاعي للخارج من نقطة — رائع لتأثيرات الإضاءة والفينييتات. يقود القياسي حول المركز، مما يجعله الخيار الأول لأجزاء مخططات الفطيرة وعجلات الألوان ومؤشرات الدوران. ابدأ من أحد الإعدادات المسبقة المدمجة (Lime Swiss و Sunset و Sky و Aurora) أو صمم من الصفر.
كيفية إنشاء تدرج CSS
تستغرق العملية برمتها أقل من دقيقة.
- 01
اختر نوع التدرج
حدد خطي أو شعاعي أو قياسي من محدد النوع. بالنسبة للخطي، قم أيضاً بتعيين الزاوية. تتحدث المعاينة فوراً.
- 02
أضف ونقاط الألوان
انقر فوق إضافة نقطة لإدراج نقطة جديدة، ثم اسحب منزلقها أو اكتب نسبة مئوية لتحديد موضعها. تدعم ما يصل إلى ستة نقاط — إعادة الترتيب التلقائية للنقاط حسب الموضع.
- 03
اختر اللون لكل نقطة
انقر فوق مربع اللون لفتح منتقي النظام، أو اكتب قيمة hex مباشرة. تعمل تنسيقات RGB و hex معاً.
- 04
معاينة في الوقت الفعلي
تعرض لوحة المعاينة التدرج باستخدام محرك التدرج الأصلي في المتصفح، لذا النتيجة تطابق بالضبط ما سينتجه CSS في الإنتاج.
- 05
انسخ إعلان CSS
انقر فوق نسخ لالتقاط الخلفية الكاملة: تصريح linear-gradient(...). الصقها في ورقة أنماط أو مكون صمم أو قيمة عشوائية Tailwind مثل bg-[<value>].
حالات الاستخدام الشائعة للتدرج
كل نوع تدرج يتفوق في سيناريو مختلف.
- 01خلفيات قسم البطل — تدرج خطي بزاوية 135 درجة لمسح قطري حديث.
- 02حالات عند تحوم الزر — تدرج خطي دقيق من نقطتين للعمق.
- 03موضع أو نقوش شعاعي — من الظلام إلى الشفاف الشعاعي على تراكب صورة.
- 04مخططات الفطيرة وحلقات التقدم — تدرج قياسي مع نقاط صعبة.
- 05معاينات محدد عجلة الألوان — تدرج قياسي بكامل الطيف.
- 06تدرجات النص — طبق التدرج على الخلفية، ثم استخدم background-clip: text.
يعمل بالكامل في متصفحك
يعمل منشئ التدرج 100٪ من جانب العميل — لا تُرسل أي بيانات إلى أي خادم. يتم عرض المعاينة بواسطة محرك CSS الخاص بمتصفحك، مما يعني أن ما تراه يطابق ما سيعرضه متصفح أي زائر باستخدام نفس CSS.
ملاحظة عملية واحدة: عملاء البريد الإلكتروني لا يزالون يحصلون على دعم متفاوت لتدرجات CSS. إذا كنت تصق CSS المُولّد في قالب بريد إلكتروني HTML، أضف fallback background-color صلب قبل إعلان التدرج بحيث يرى المستلمون على العملاء القدامى شيئاً معقولاً.
الأسئلة الشائعة حول منشئ تدرج CSS
ما الفرق بين التدرجات الخطية والشعاعية والقياسية؟
تنتقل التدرجات الخطية على طول خط مستقيم بزاوية معينة. تنتشر التدرجات الشعاعية للخارج من نقطة مركزية — مفيدة للإضاءة والمؤثرات الموضعية. تقود التدرجات القياسية حول المركز مثل عقارب الساعة — مثالية لأجزاء الفطيرة وعجلات الألوان.
هل يمكنني استخدام هذا في مشاريع Tailwind CSS؟
نعم. انسخ القيمة المُولّدة واستخدمها كقيمة عشوائية في Tailwind، على سبيل المثال: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. سيتضمن Tailwind هذا في ورقة الأنماط الناتجة.
هل المعاينة تطابق بالضبط ما سأراه على الموقع المباشر؟
نعم — يتم عرض المعاينة بواسطة محرك التدرج نفسه الذي سيعرض CSS المباشر، لذا الإخراج دقيق بكسل.
هل يمكنني استخدام تدرجات CSS في قوالب البريد الإلكتروني؟
معظم عملاء البريد الإلكتروني لا يدعمون تدرجات CSS بشكل موثوق. أضف دائماً لون خلفية صلب قبل إعلان التدرج كـ fallback.
هل هناك حد لعدد نقاط الألوان؟
يدعم المنشئ ما يصل إلى ستة نقاط. بالنسبة لمعظم التصاميم، اثنتان إلى أربع كافية؛ أكثر من ستة يميل إلى تقليل الوضوح بدلاً من إضافة ثروة.