🌈 مُولّد التدرجات اللونية لـ CSS
أنشئ تدرجات لونية خطية أو دائرية لـ CSS في ثوانٍ — اختر الألوان، قم بتعديل الزاوية أو الشكل، أضف عددًا غير محدود من نقاط التوقف اللونية، وانسخ الشفرة النهائية بالضغط على زر واحد. تامة مجانية وتعمل بالكامل في متصفحك.
مصمم للخصوصية. تعمل هذه الأداة بالكامل في متصفحك — لا يتم رفع أي شيء تدخله أو تخزينه، وتعمل الأداة دون اتصال بالإنترنت.
حول
تتيح هذه الأداة بناء تدرجات لونية لـ CSS بصريًا دون كتابة سطر واحد من الشفرة. اختر بين linear-gradient و radial-gradient، اضبط الزاوية أو الشكل، اضبط نقاط التوقف اللونية باستخدام مُحدد الألوان والشريط المتحرك للوضع، وقم بمعاينة النتيجة مباشرة في الوقت الفعلي. تحتوي الأداة على ثمانية إعدادات مسبقة (غروب الشمس، المحيط، الأعاصير، الأضواء، وغيرها) لمساعدتك في البداية. وبما أن كل عملية تتم محليًا في متصفحك باستخدام JavaScript النقي، فإن بيانات الألوان أو معلومات التصميم لا تغادر جهازك أبدًا — لا يوجد خادم، ولا حساب.
كيف تستخدم
- اختر نوع التدرج — خطي أو دائري — من قائمة نوع التدرج.
- للمُدرجات الخطية، اضبط الزاوية (0–360°) باستخدام المُحدد أو مدخل الأرقام. وللمُدرجات الدائرية، اختر البيضاوي أو الدائرة كشكل.
- انقر على لون من لوحة ألوان التوقفات لفتح مُحدد الألوان، ثم اسحب مُدخل الموقع لوضع كل توقف بالضبط حيث تريده.
- انقر على + إضافة توقف لإدراج توقف لون جديد تلقائيًا في أكبر فجوة، أو انقر على زر ✕ لحذف أي توقف (يجب أن يكون هناك على الأقل 2 توقف).
- انقر على نسخ CSS لنسخ إعلان خلفية: linear-gradient(…) أو radial-gradient(…) الناتج إلى حافظتك ولصقه مباشرة في ملف أسلوبك.
الأسئلة الشائعة
- هل مُولّد التدرجات CSS مجاني للاستخدام؟
- نعم، مجاني تمامًا — بدون اشتراك، بدون حساب، ولا حدود استخدام مخفية. افتح الصفحة وابدأ في بناء التدرجات فورًا.
- هل تعمل هذه الأداة دون اتصال بالإنترنت؟
- نعم. بمجرد تحميل الصفحة، تعمل الأداة بالكامل دون اتصال بالإنترنت بدون مكالمات API خارجية أو اعتماديات CDN أو طلبات خادم. يمكن استخدامها بأمان على الطائرة أو في بيئة محدودة الشبكة.
- هل يتم إرسال ألوانك أو تصميمك إلى خادم؟
- لا. يتم إنشاء جميع التدرجات وعرضها محليًا في متصفحك باستخدام JavaScript. يتم حفظ خيارات الألوان فقط في تخزين المتصفح المحلي (localStorage) ولا يتم نقلها أبدًا.
- ما الفرق بين linear-gradient وradial-gradient؟
- يتم تدرج linear-gradient الألوان على طول خط مستقيم بزاوية معينة (مثلاً 135deg). يشع الألوان من نقطة مركزية في شكل إهليلج أو دائرة. كلاهما ينتج كود CSS قياسي يعمل في جميع المتصفحات الحديثة.
- كم عدد توقفات الألوان التي يمكنني إضافتها؟
- لا يوجد حد مفروض — يمكنك إضافة عدد توقفات الألوان التي تحتاجها (الحد الأدنى 2). يتم وضع التوقفات الجديدة تلقائيًا في أكبر فجوة في التدرج، ويتم ملء اللون المُستنتج في تلك الموضع مسبقًا لبدء سلس.
- هل هذه الأداة ترفع بياناتي؟
- لا. يعمل كل شيء مباشرة في متصفحك، لذا بياناتك لن تغادر جهازك أبداً — بل إنها تعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.