كيفية الاستخدام
- اختر تدرجًا خطيًا أو شعاعيًا أو مخروطيًا، ثم حدّد الزاوية أو موضع المركز.
- حدّد لون كل نقطة توقف وشفافيتها وموضعها. أضف حتى ست نقاط توقف أو أزل ما لا تحتاج إليه.
- تحقق من المعاينة، ثم انسخ سطر CSS إلى ملف الأنماط.
كيف تعمل الأداة
الناتج هو تصريح CSS قياسي للخلفية. تمتد التدرجات الخطية على امتداد زاوية: 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل. تنتشر التدرجات الشعاعية من نقطة مركزية على شكل دائرة أو قطع ناقص ملائم لمربع العنصر. أما التدرجات المخروطية فتدور حول نقطة مركزية، بدءًا من الزاوية المحددة، وهي مناسبة للتأثيرات الشبيهة بالرسوم الدائرية وعجلات الألوان.
تُكتب نقاط توقف الألوان حسب ترتيب مواضعها، لذا يمكنك سحبها بحرية. تُكتب نقطة التوقف ذات الشفافية المنخفضة بصيغة rgba()، ما يسمح للخلفية بالظهور من خلالها. تؤدي إضافة نقطتي توقف في الموضع نفسه إلى حد فاصل حاد بدلًا من المزج، وهذه هي طريقة إنشاء الخطوط.
تعمل وظائف التدرج الثلاث في جميع المتصفحات الحديثة. تمتزج التدرجات افتراضيًا في نطاق الألوان sRGB، وقد يبدو اللون بين الألوان المتكاملة (كالأزرق والأصفر مثلًا) مائلًا قليلًا إلى الرمادي؛ لذا فإن إضافة نقطة توقف وسطية بلون أكثر سطوعًا تعالج ذلك.
أمثلة
خلفية هادئة للترويسة
ينشئ linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) تدرجًا ناعمًا من الأعلى إلى الأسفل، مع الحفاظ على وضوح النص الداكن.
خطوط بحواف حادة
استخدم أربع نقاط توقف: #0b5d1e 0%، و#0b5d1e 50%، و#f2c14e 50%، و#f2c14e 100%. تلتقي نقطتا التوقف عند 50% من دون مزج، فتتكون منطقتان بلونين مصمتين.
تأثير الإضاءة الموضعية
إضافة تدرج شعاعي (دائرة عند أعلى اليسار) يبدأ من rgba(255, 255, 255, 0.6) وينتهي عند rgba(255, 255, 255, 0) فوق لون ما، تمنح الزاوية إضاءة ناعمة.
الأسئلة الشائعة
إلى أي اتجاه يشير 0deg؟
في CSS، يشير 0deg إلى الأعلى، لذا يبدأ التدرج من الأسفل وينتهي عند الأعلى. أما 90deg فيمتد من اليسار إلى اليمين. وهذا يختلف عن بعض تطبيقات التصميم، حيث تعني 0° غالبًا الاتجاه من اليسار إلى اليمين.
هل يمكنني استخدام التدرج على النص؟
نعم: طبّق الخلفية، ثم أضف background-clip: text وcolor: transparent. تأكد من وضوح النص مقابل الصفحة في جميع مواضع التدرج.
هل أحتاج إلى بادئات خاصة بالمتصفحات مثل -webkit-linear-gradient؟
لا. تدعم المتصفحات الحديثة الصياغة من دون بادئات. ولا تحتاج إلى البادئات إلا للمتصفحات القديمة جدًا.
الخصوصية
يُنشأ كل شيء في متصفحك. لا تُرسل ألوانك وإعداداتك ولا تُخزَّن.