مولد CSS Gradient
مولد CSS Gradient ينشئ خلفيات CSS من نوع linear-gradient وradial-gradient وconic-gradient. تبدأ الأداة بثلاث نقاط لون، زاوية 135 درجة، ومعاينة مباشرة. يمكنك تغيير النوع، تعديل الزاوية في linear وconic، إضافة color stops حتى ثمانية، تغيير موضع كل لون بالنسبة المئوية، أو استخدام زر randomize لتوليد مجموعة جديدة. في الأسفل يظهر كود background جاهز للنسخ، ويمكن نسخ قيمة التدرج فقط أو قاعدة CSS كاملة.
كيف تبنى قيمة gradient؟
في linear gradient تستخدم الأداة الزاوية بالدرجات ثم قائمة الألوان مع المواضع، مثل linear-gradient(135deg, #6366f1 0%, #ec4899 100%). في radial gradient تكون البداية من المركز بشكل دائري، بينما conic gradient يدور حول نقطة مركزية ويمكن أن يبدأ من زاوية محددة. كل stop يحتوي على لون HEX وموضع من 0 إلى 100%. ترتيب هذه المواضع يحدد انتقال اللون؛ القيم المتقاربة تعطي حافة حادة، والقيم المتباعدة تعطي مزجا ناعما.
القوالب والعشوائية
تتضمن الأداة presets مثل Sunset وOcean وForest وMidnight وMojito وغيرها. هذه القوالب تضبط النوع والزاوية والألوان دفعة واحدة، وهي مناسبة كبداية قبل التعديل اليدوي. زر randomize ينشئ عددا من الألوان العشوائية ويرتب مواضعها بالتساوي. التدرجات العشوائية قد تكون جميلة، لكنها تحتاج مراجعة التباين إذا كان فوقها نص أو أيقونات.
متى تستخدم التدرجات؟
التدرجات مفيدة للخلفيات، الأزرار البارزة، البطاقات الترويجية، placeholders، حالات empty state، أو زخارف خفيفة داخل واجهة. لكن استخدامها بكثافة قد يجعل الواجهة متعبة أو يقلل وضوح المحتوى. في التطبيقات العملية، استخدم التدرج كعنصر داعم لا كبديل عن التنظيم البصري. وإذا كان الهدف نصا مقروءا، جرّب اللون على شاشات مختلفة وأضف طبقة شفافة أو ظل نص عند الحاجة.
نصائح CSS
انسخ قاعدة background عندما تريد استخدامها مباشرة في ملف CSS، وانسخ قيمة التدرج فقط إذا كنت ستضعها داخل متغير مثل --hero-bg. تأكد من دعم المتصفح إذا استخدمت conic-gradient في بيئات قديمة. ولتجنب اختلافات مفاجئة، احتفظ بالألوان بصيغة HEX والمواضع بالنسبة المئوية كما خرجت من الأداة. عند إنشاء design system، وثق اسم كل تدرج والغرض منه بدلا من استخدام تدرجات كثيرة بلا نمط واضح.
مثال تطبيقي
لخلفية hero، جرب تدرجا linear بزاوية 135 درجة ولونين أو ثلاثة فقط. للزخرفة الدائرية الخفيفة، استخدم radial، ولتأثير حلقي أو عجلة ألوان استخدم conic. كلما زاد عدد stops زادت صعوبة ضبط التباين، لذلك ابدأ بسيطا ثم أضف التعقيد عند الحاجة. إذا كان فوق التدرج نص، اختبره مع أطول عنوان فعلي وليس مع كلمة قصيرة فقط.
وإذا استخدمت التدرج كمتغير CSS، اختر اسما يصف الغرض مثل --hero-gradient أو --brand-accent-bg.
بناء التدرج ونسخ CSS
يدعم مولد التدرجات ثلاثة أنواع: linear وradial وconic. في التدرج الخطي والمخروطي يظهر شريط زاوية من 0 إلى 360 درجة، أما التدرج الشعاعي فيخفي زاوية الاتجاه لأنه يعتمد على دائرة. يمكن تعديل كل stop عبر لون وموضع من 0% إلى 100%، وإضافة نقاط جديدة حتى ثماني نقاط، أو حذف النقاط الزائدة ما دام هناك نقطتان على الأقل. زر العشوائية يختار زاوية وعددا جديدا من النقاط وألوانا عشوائية، بينما presets الجانبية تطبق مجموعات جاهزة.
تعرض المعاينة الخلفية النهائية مباشرة، ويظهر تحتها سطر CSS كامل مثل `background: linear-gradient(...)`. زر نسخ CSS ينسخ القاعدة كاملة، بينما زر نسخ الخلفية ينسخ قيمة التدرج فقط لاستخدامها داخل خاصية أخرى. عند تصميم واجهة حقيقية، راقب تباين النص فوق التدرج ولا تعتمد على الألوان الجميلة فقط. إذا كان التدرج سيستخدم خلفية لزر أو بطاقة، جربه في أحجام صغيرة وكبيرة، لأن مواضع الألوان قد تبدو مختلفة بين مساحة عريضة ومساحة ضيقة.
التعليقات