مولّد تدرجات CSS
أنشئ تدرجًا لونيًا خطيًا أو شعاعيًا بصيغة CSS بشكل مرئي، وانسخ كود CSS الجاهز مباشرة من متصفحك.
🔒 تتم المعالجة محليًا في متصفحك
Loading…
كيفية الاستخدام
- اختر خطي أو شعاعي كنوع للتدرج. بالنسبة للتدرجات الخطية، اسحب شريط التمرير أو اكتب قيمة لضبط الزاوية بالدرجات.
- لكل نقطة لونية عيّنة لون وموضع (0-100%). انقر على العيّنة لاختيار لون، أو اكتب موضعًا لتحريك تلك النقطة على طول التدرج.
- استخدم "إضافة نقطة" لإضافة ما يصل إلى 5 نقاط لونية، أو "إزالة" بجانب أي نقطة لحذفها (يلزم وجود نقطتين على الأقل).
- يتحدث مربع المعاينة أعلى مخرجات CSS فورًا مع كل تعديل تجريه على أي عنصر تحكم — دون الحاجة إلى الضغط على أي زر.
- انقر على نسخ لنسخ تعريف CSS الناتج، الجاهز للصقه في ورقة الأنماط الخاصة بك.
المميزات
- يدعم التدرجات الخطية (بزاوية قابلة للتعديل) والشعاعية على حد سواء
- حتى 5 نقاط لونية، لكل منها لون وموضع خاصان بها
- مربع معاينة فوري يتحدث لحظيًا مع أي تعديل
- نسخ بنقرة واحدة لتعريف CSS الجاهز للصق
- يعمل بالكامل من جهة المتصفح — بيانات التدرج لا تغادر متصفحك أبدًا
الأسئلة الشائعة
هل ترسل هذه الأداة بيانات التدرج الخاص بي إلى أي مكان؟
لا. يتم إنشاء التدرج ومعاينته بالكامل باستخدام JavaScript وCSS محليين — لا يُرفع أو يُرسل شيء إلى أي خادم على الإطلاق.
كم عدد نقاط الألوان التي يمكنني إضافتها؟
حتى 5 نقاط. بما أن التدرج يحتاج إلى نقطتين على الأقل ليكون منطقيًا، يتم تعطيل زر الإزالة عند الوصول إلى نقطتين فقط.
هل لضبط الزاوية أي تأثير على التدرجات الشعاعية؟
لا. تنتشر التدرجات الشعاعية في هذه الأداة دائمًا من المركز إلى الخارج على شكل دائرة، لذا يُطبَّق إعداد الزاوية على التدرجات الخطية فقط.
ماذا يحدث إذا كان لنقطتين نفس الموضع؟
هذا مسموح به ويمكن استخدامه عمدًا لإنشاء حافة لونية حادة بدلًا من مزج سلس — تبقى كلتا النقطتين في كود CSS الناتج.
هل يمكنني لصق المخرجات مباشرة في ملف CSS الخاص بي؟
نعم. يعرض مربع المخرجات تعريف `background: ...;` كاملاً يمكنك لصقه كما هو في ورقة أنماط أو نمط مضمّن.