مولد تدرجات CSS
صمّم تدرجًا بصريًا، ثم انسخ كود CSS الدقيق بنقرة واحدة.
يتيح لك مولد تدرجات CSS هذا بناء تدرج (css gradient) عبر التفاعل معه بدل تحرير الصياغة يدويًا. اختر نقطتَي لون أو أكثر، واسحبها على الشريط، واضبط الزاوية أو بدّل إلى الشعاعي، وشاهد معاينة بالحجم الكامل تتحدّث حيًّا. وحين يبدو صحيحًا، انسخ إعلان الخلفية الجاهز مباشرةً إلى ملف الأنماط لديك.
من السهل أن تكاد تصيب صياغة التدرج: فمواضع النقاط، وكلمات الزاوية، وصيغ الألوان لكلٍّ منها خصوصياتها، وأي خطأ مطبعي يجعلها لا تُظهِر شيئًا بصمت. توليد الكود من معاينة تعمل يزيل التخمين، سواء احتجت خلفية بطلٍ بلونين هادئين، أو تعبئة زر زاهية، أو طبقة تعلو صورة.
يعمل المولد بالكامل داخل متصفحك، وهو مجاني بلا حساب. والمخرجات كود CSS قياسي بدالتَي linear-gradient() أو radial-gradient() يعمل في كل متصفح حديث دون بادئات.
كيفية إنشاء تدرج CSS
- اختر نوع التدرج: خطي أو شعاعي.
- انقر كل نقطة لون لضبط لونها، باستخدام المنتقي أو كود hex.
- اسحب النقاط على الشريط للتحكم في مكان بدء كل لون وامتزاجه.
- اضبط الزاوية للتدرجات الخطية، أو الشكل والموضع للشعاعية.
- أضف نقاطًا إضافية إن أردت أكثر من لونين.
- انقر «نسخ CSS» والصق الكود في ملف الأنماط.
ماذا يفعل مولد التدرجات هذا
تتيح لك الأداة بناء تدرج بصريًا، باختيار نقاط اللون، وسحبها على شريط، وضبط زاوية أو شكل شعاعي، ثم تسلّمك كود CSS الجاهز للنسخ. والمخرجات إعلان خلفية قياسي تلصقه في ملف أنماطك؛ لا ملف صورة ولا خطوة تصدير، مجرد كود.
ولأنك تُشكّل معاينة حية بدل كتابة الصياغة يدويًا، ترى بالضبط ما سيُظهَر قبل أن يصل إلى صفحتك. وهذا يزيل التخمين من لغةٍ فيها قيمة واحدة في غير موضعها تُنتِج لا شيء إطلاقًا بصمت.
كيف تعمل صياغة تدرجات CSS
يُكتب التدرج الخطي بصيغة linear-gradient(direction, color-stop, color-stop, ...). الاتجاه زاوية مثل 90deg أو كلمة مثل to right، وكل نقطة لون بموضع اختياري مثل #ff6600 20%. أما التدرج الشعاعي فيستخدم radial-gradient() ويصف شكلًا وموضعًا بدل زاوية، ممتزجًا نحو الخارج من نقطة مركز.
مواضع النقاط هي حيث تختبئ الخصوصيات. أسقِطها فيباعد المتصفح بين النقاط بالتساوي؛ وأعطِ نقطتين الموضع نفسه فتحصل على حافة حادة بدل امتزاج، وهكذا تصنع الخطوط. يكتب المولد صياغة صحيحة نيابةً عنك، فتتعلّم الصيغة بمشاهدة الكود يتغيّر أثناء سحبك.
نصائح لتدرجات تبدو احترافية
أكبر عامل في الجودة هو اختيار درجات متجاورة: أزرق يمتزج بالبنفسجي، وبرتقالي بالوردي. أما الألوان من طرفَي عجلة الألوان فتمرّ بدرجة رمادية موحلة في المنتصف. وإن اضطررت إلى الجسر بين درجات متباعدة، فأضف نقطة وسطى تختار لونًا وسيطًا مقصودًا.
الرهافة تبيع أيضًا. تدرج خلفية بين درجتين من اللون نفسه يُقرأ عمقًا لا زخرفة. ولطبقات النص فوق الصور، التدرج نحو أسود شفاف هو الحيلة القياسية: linear-gradient(rgba(0,0,0,.6), transparent).
أين تثبت التدرجات جدواها
المهام الشائعة هي خلفيات الأبطال والأقسام، وتعبئات الأزرار والبطاقات، وطبقات الصور التي تبقي النص الأبيض مقروءًا فوق صورة مزدحمة. خلفية لطيفة بلونين تضيف عمقًا لتخطيط مسطّح، بينما تعبئة زاهية متعددة النقاط تجعل زر الحثّ على الإجراء يقفز من الصفحة.
وتنوب التدرجات أيضًا عن الصور. فخلفية تدرّج مختارة جيدًا تُحمَّل فورًا، وتتمدّد لأي شاشة بوزن ملف صفري، ولا تتبكسل أبدًا، ولهذا كثيرًا ما تتفوّق على صورة JPEG للتعبئات الزخرفية والحالات الفارغة.
استخدام التدرجات على النص
النص المتدرّج معالجة رائجة للعناوين. اجعل التدرج خلفيةً للعنصر، ثم أضف background-clip: text مع لون نص شفاف حتى يظهر التدرج عبر أشكال الحروف. يُنتِج المولد جزء التدرج؛ وأنت تلفّ هذين السطرين الإضافيين حوله.
ضع التباين في بالك: فتدرج يهبط إلى لون فاتح قد يترك جزءًا من عنوان صعب القراءة على خلفية شاحبة. اختبر أفتح نقطة في التدرج مقابل السطح خلفه، وفضّل التدرجات التي تبقى ضمن نطاق مقروء لأي شيء يحمل محتوى فعليًا.
ملاحظات في إتاحة الوصول والأداء
حين يجلس تدرج خلف النص، يجب أن يصمد التباين عبر التدرج كله، لا عند منتصفه فقط. افحص النص مقابل أفتح وأغمق نقطة يتراكب معها، لأن زوجًا يجتاز في المتوسط قد يفشل حيث يكون التدرج أشحب. وطبقة داكنة شبه شفافة على صورة طريقة موثوقة لضمان المقروئية.
أما في الأداء، فتدرجات CSS يرسمها المتصفح ولا تكلّف شيئًا يُذكر في التنزيل، بخلاف صورة خلفية. وهي مستقلة عن الدقة أيضًا، فإعلان واحد يبدو حادًا من هاتف إلى شاشة 4K دون أن تشحن أصولًا متعددة.
أدوات ذات صلة
التدرجات بجودة الألوان التي تغذّيها فقط، لذا فمنتقي الألوان رفيق طبيعي لاختيار النقاط وقراءة قيمها بصيغ HEX وRGB وHSL قبل أن تُسقِطها فيه.
وإن أعطاك تصميم ألوانًا بالتدوين الخطأ، فإن أداتَي تحويل HEX إلى RGB وRGB إلى HEX تترجمانها بحساب دقيق. وكل هذه تعمل بالكامل داخل متصفحك، ومولّد التدرجات نفسه يُخرِج CSS خامًا تنسخه ببساطة.
الأسئلة الشائعة
هل مولد التدرجات مجاني؟
نعم. مجاني بلا تسجيل، وبلا علامة مائية، وبلا حدّ لعدد التدرجات التي تنشئها أو تنسخها.
أي متصفحات تدعم الكود المولَّد؟
كل المتصفحات الحديثة، بما فيها Chrome وFirefox وSafari وEdge، تدعم linear-gradient() وradial-gradient() دون بادئات المورّدين. لا تعجز عن ذلك إلا المتصفحات القديمة جدًا (IE9 وما قبله).
هل يمكنني عمل تدرج بأكثر من لونين؟
نعم. أضف ما تشاء من نقاط اللون وحدّد موضع كلٍّ منها على الشريط. التدرجات متعددة النقاط هي طريقة الحصول على خلفيات بنمط الغروب والشفق.
هل يمكنني استخدام التدرج على النص؟
نعم، بحيلة صغيرة: اجعل التدرج خلفيةً للنص، ثم أضف background-clip: text ولونًا شفافًا للنص. يمنحك المولد جزء التدرج؛ أضف حوله هذين السطرين.
هل يصدّر ملف صورة؟
لا، يُخرِج كود CSS يتمدّد إلى أي حجم بوزن ملف صفري. وإن احتجت التدرج كصورة PNG لسياق غير الويب، فالتقط لقطة شاشة للمعاينة أو ارسمه في محرر صور.
هل يعمل على الجوال؟
نعم، الأزرار ملائمة للمس. بناء تدرجات دقيقة متعددة النقاط أريح على شاشة أكبر، لكن كل شيء يعمل على الهاتف.