مولّد تدرّجات CSS
صمّم تدرّجات CSS خطية وشعاعية ومخروطية جميلة مع معاينة حية وانسخ الكود بنقرة واحدة
معاينة حية
نوع التدرّج
نقاط الألوان
قوالب جاهزة
كود CSS
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);يتم إنشاء كل شيء محليًا داخل متصفحك ولا يُرسل أي شيء إلى الخادم.
حول هذه الأداة
يتيح لك مولّد تدرّجات CSS هذا تصميم مزج ألوان سلس بصريًا ونسخ كود CSS جاهز للّصق بنقرة واحدة. اختر تدرّجًا خطيًا أو شعاعيًا أو مخروطيًا، وأضف ما تشاء من نقاط الألوان، واضبط لون كل نقطة بدقة عبر منتقي ألوان أصلي أو حقل HEX مع موضع من 0 إلى 100 بالمئة. للتدرّجات الخطية يمكنك تعيين أي زاوية من 0 إلى 360 درجة أو استخدام أزرار الاتجاه السريعة؛ وتدعم التدرّجات الشعاعية أشكال الدائرة أو البيضاوي، بينما تدوّر التدرّجات المخروطية الألوان حول نقطة مركزية. تتحدّث المعاينة الحية الكبيرة فورًا لترى تمامًا ما تنشئه. ابدأ من أحد القوالب المختارة، واضغط زر العشوائي لأفكار جديدة، ثم انسخ خاصية background المُنشأة إلى ورقة الأنماط. كل شيء يعمل محليًا في متصفحك، لذا فهو سريع وخاص ويعمل دون اتصال.
طريقة الاستخدام
- 1 اختر نوع التدرّج: خطي أو شعاعي أو مخروطي.
- 2 أضف نقاط ألوان، ثم عيّن لون كل نقطة (المنتقي أو HEX) وموضعها من 0 إلى 100%.
- 3 اضبط الزاوية للتدرّجات الخطية والمخروطية، أو الشكل للشعاعية، أو حمّل قالبًا جاهزًا.
- 4 راقب المعاينة الحية، ثم انقر نسخ CSS للصق خاصية background في مشروعك.
كيف تعمل
تُكوّن الأداة دالة تدرّج CSS قياسية من إعداداتك. تستخدم التدرّجات الخطية linear-gradient(الزاوية, النقاط)، حيث توجّه الزاوية خط التدرّج وتُكتب كل نقطة لون كلون متبوعًا بموضع مئوي. تستخدم التدرّجات الشعاعية radial-gradient(الشكل at center, النقاط) لنشر الألوان من المنتصف إلى الخارج، وتستخدم التدرّجات المخروطية conic-gradient(from الزاوية at center, النقاط) لتدوير الألوان حول نقطة. تُرتَّب نقاط الألوان تلقائيًا حسب الموضع قبل الإخراج، لذا لا يهمّ ترتيب إضافتها. تُحصَر المواضع بين 0 و100% ويُحتفظ دائمًا بنقطتين على الأقل، لذا يكون كود CSS المُنشأ صالحًا دومًا. النتيجة هي تصريح background بسيط يمكنك وضعه في أي متصفح حديث دون بادئات.
الأسئلة الشائعة
ما الفرق بين التدرّجات الخطية والشعاعية والمخروطية؟
يمزج التدرّج الخطي الألوان على طول خط مستقيم تحدّد اتجاهه بزاوية. ينشر التدرّج الشعاعي الألوان من نقطة مركزية إلى الخارج في دائرة أو بيضاوي. يدوّر التدرّج المخروطي الألوان حول نقطة مركزية، وهو مفيد للمخططات الدائرية وعجلات الألوان والتأثيرات الزاوية. الثلاثة جميعها CSS أصلي ومدعومة في كل متصفح حديث.
كم عدد نقاط الألوان التي يمكنني إضافتها؟
يمكنك إضافة أي عدد تحتاجه من نقاط الألوان؛ تحتفظ الأداة دائمًا بنقطتين على الأقل ليبقى التدرّج صالحًا. لكل نقطة لونها الخاص وموضع من 0 إلى 100 بالمئة. تتيح لك إضافة المزيد من النقاط إنشاء أقواس قزح وخلفيات متعددة الألوان وانتقالات سلسة متعددة الألوان.
ماذا يفعل التحكّم في الزاوية؟
في التدرّج الخطي تحدّد الزاوية اتجاه خط الألوان: 0 درجة للأعلى، و90 لليمين، و180 للأسفل، و270 لليسار، فتوجّه المزج إلى أي مكان. في التدرّج المخروطي تحدّد الزاوية بداية دوران المسح. يمكنك سحب شريط التمرير أو كتابة قيمة دقيقة أو استخدام أزرار الاتجاه السريعة.
هل كود CSS المُنشأ جاهز للاستخدام في الإنتاج؟
نعم. الناتج خاصية background قياسية تستخدم دوال تدرّج أصلية تعمل في كل المتصفحات الحالية دون بادئات المورّدين. انسخ السطر والصقه في ورقة الأنماط أو النمط المضمّن أو المكوّن. يمكنك تغيير اسم الخاصية إلى background-image إن أردت الاحتفاظ بلون خلفية منفصل.
هل تُرسل بياناتي إلى أي مكان؟
لا. يعمل المولّد بالكامل في متصفحك باستخدام JavaScript وCSS. لا يُرفع أي شيء عن ألوانك أو تدرّجاتك أو يُخزَّن على خادم، لذا فالأداة خاصة وتستمر بالعمل حتى لو قطعت الاتصال بالإنترنت.
أدوات واستخدامات ذات صلة
اقرن مولّد التدرّجات بمحوّل الألوان لاختيار قيم HEX وRGB وHSL الدقيقة، ومدقّق التباين للتأكد من بقاء النص قابلًا للقراءة فوق تدرّجك. يستخدمه المصمّمون والمطوّرون لإنشاء خلفيات رئيسية وأزرار وبطاقات وشارات وتأثيرات زخرفية للمواقع والتطبيقات.