مولّد تدرجات CSS

أنشئ تدرجات CSS خطية وشعاعية ومخروطية بصرياً. أضف نقاط توقف ألوان متعددة وانسخ شفرة CSS. يدعم جميع أنماط التدرجات الحديثة.

الاستوديو · محيط محايد

نقاط اللون — اسحب المقابض، وانقر على المسار للإضافة

النوع

الزاوية 90°

نقاط اللون

CSS

الميزات

خطي وشعاعي ومخروطي

نقاط لونية متعددة

التحكم في الزاوية والاتجاه

معاينة حية مع كود CSS

طريقة الاستخدام

1. اختر نوع التدرج والزاوية؛ تعرض منطقة العمل معاينة بالحجم الكامل.

2. اسحب المقابض على المسار لتحريك النقاط، وانقر على مكان فارغ لإضافة نقطة (حتى ست نقاط)، أو اضبط بدقة عبر حقول اللون والنسبة.

3. انسخ CSS الناتج — راجعه على خلفية رقعة الشطرنج لاكتشاف التدرّج المتقطع فوق الشفافية.

حول هذه الأداة

ترسم تدرجات CSS انتقالات لونية ناعمة دون ملفات صور، فتبقى حادة بأي حجم ولا تكلّف شيئًا في التنزيل. يبني هذا المولّد الأنواع الأصلية الثلاثة: linear-gradient على امتداد زاوية، وradial-gradient المنتشر من المركز، وconic-gradient الذي يدور حول نقطة مثل دائرة الألوان. اسحب المقابض على الشريط لتحريك نقاط التوقف اللونية، وانقر على الشريط لإضافة نقطة (حتى ست نقاط)، واضبط الألوان والمواضع بدقة عبر الحقول. يعرض المسرح النتيجة بالحجم الكامل، ويكشف السطح المربّع عن الأشرطة اللونية أو الشفافية غير المتوقعة. الناتج CSS قياسي يعمل في جميع المتصفحات الحالية، جاهز للصق في تعريف background أو background-image.

الأسئلة الشائعة

ما الفرق بين التدرجات الخطية والشعاعية والمخروطية؟

التدرج الخطي يغيّر اللون على امتداد خط مستقيم بزاوية تختارها. والشعاعي ينتشر من نقطة مركزية على شكل دائرة أو قطع ناقص. أما المخروطي فيدوّر الألوان حول نقطة مركزية، وهو مفيد للمخططات الدائرية ودوائر الألوان.

كيف تعمل زوايا التدرج؟

‏0deg تشير إلى الأعلى، و90deg إلى اليمين، و180deg إلى الأسفل، و270deg إلى اليسار. لذا يبدأ linear-gradient(90deg, red, blue) بالأحمر على اليسار وينتهي بالأزرق على اليمين.

لماذا تظهر أشرطة واضحة في تدرجي؟

تظهر الأشرطة عندما يمتد لونان متقاربان على مساحة كبيرة، خاصة على شاشات 8 بت. يساعد في ذلك إضافة نقطة توقف وسيطة، أو اختيار ألوان أكثر تباينًا، أو إضافة نسيج ضوضاء خفيف.

هل يمكن أن يتضمن التدرج شفافية؟

نعم. استخدم ألوانًا بقناة ألفا، مثل rgba أو HEX بثمانية أرقام. لاحظ أن التلاشي نحو الكلمة المفتاحية transparent قد ينتج منتصفًا رماديًا في بعض الحالات، بينما يبدو التلاشي نحو اللون نفسه بألفا صفرية أنظف.

هل يمكنني استخدام تدرج كلون للنص أو للحدود؟

نعم، مع CSS إضافي. للنص، اجعل التدرج خلفية ثم استخدم background-clip: text مع لون نص شفاف. وللحدود، الأسلوبان الشائعان هما border-image أو خلفية على عنصر مغلِّف.