نقاط ألوان مرنة وقوالب متعددة الألوان
إنشاء تدرج لوني باستخراج الألوان من صورة
شيفرة فورية متعددة الأطر وتصدير عينات عالية الدقة
شرح الميزات
مسار تفاعلي متعدد النقاط
اسحب نقاط اللون وحدد مواضعها بصريًا على شريط من 0 إلى 100%.
استخراج تدرج من صورة
حوّل الصور إلى لوحات CSS عبر خيار إنشاء تدرج لوني من صورة.
معاينة مباشرة لعناصر الواجهة
اختبر التدرجات فورًا على البطاقات والأزرار التفاعلية والطباعة المتدرجة.
مزامنة عنوان URL
يحدّث كل تعديل جزء URL لتتمكن من مشاركة حالة التدرج الدقيقة مع فريقك.
تنزيل بتنسيقات متعددة
نزّل صور 1080p عالية الدقة (PNG وJPG وWEBP) أو أوراق PDF قابلة للطباعة أو مقاطع الشيفرة.
ما استخدامات هذه الأداة؟
خلفيات تطبيقات الويب
أنشئ خلفيات متجاوبة بتدرجات خطية وشعاعية لأقسام الواجهة والبطاقات.
تطوير تطبيقات الهاتف
صدّر شيفرة التدرج الجاهزة مباشرة إلى تخطيطات Flutter أو SwiftUI أو Android Kotlin Compose.
الشبكات الاجتماعية والتصميم الجرافيكي
صدّر خلفيات تدرج 1920x1080 عالية الدقة لاستخدامها في اللافتات أو أغلفة الفيديو.
معلومات الأداة
| نوع الأداة | مولّد تدرجات CSS وأطر متعددة |
|---|---|
| أنماط التدرج | خطي، شعاعي، مخروطي |
| ضبط الزاوية | نطاق دوران من 0° إلى 360° |
| نقاط الألوان | من نقطتين إلى عدد غير محدود من النقاط المخصصة |
| تنسيقات التصدير | CSS وTailwind وFlutter وSwiftUI وKotlin وSVG وJSON وPNG وJPG وWEBP وPDF |
| المعالجة | داخل المتصفح بالكامل (محليًا) |
الفوائد
- لا يلزم التسجيل أو إنشاء حساب.
- انسخ CSS فورًا مع توافق المتصفحات.
- تجنب بهتان مزج الألوان الوسيطة.
- شارك أجزاء URL لتعاون فريق التصميم.
القيود
- قد تظهر التدرجات المخروطية بشكل مختلف في المتصفحات القديمة.
- قد يؤدي استخراج الألوان من صورة شديدة الإضاءة المنخفضة إلى اختيار ظلال داكنة.
خصوصية المعالجة في المتصفح
تتم حسابات الألوان وعملية الرسم باستخدام Canvas وإنشاء مقاطع الشيفرة محليًا في متصفحك. لا تُرفع بيانات الصور أو إعدادات الألوان إلى خوادم خارجية.
مساحة عمل خاصة بالكامل
تُنفّذ المعالجة على جهاز العميل، لذا تبقى أصول التصميم وألوان العلامة التجارية خاصة.
نصائح
- انقر «عشوائي» لاكتشاف لوحات ألوان متناغمة وفريدة بسرعة.
- استخدم جزء URL لحفظ التدرجات التي أنشأتها ومتابعة تعديلها لاحقًا.
الأسئلة الشائعة
كيف أنشئ تدرجًا من ثلاثة ألوان لموقعي؟
أضف ثلاث نقاط إلى شريط التدرج، واضبط زاوية مثل 90° أو 135°، ثم انسخ قاعدة CSS من نوع background: linear-gradient(...) إلى ورقة الأنماط.
هل يمكنني استخراج تدرج من صورة مرفوعة؟
نعم. ارفع الصورة باستخدام زر «من صورة» لاكتشاف الألوان البارزة وإنشاء لوحة تدرج مخصصة فورًا.
هل تتوافق تدرجات CSS المولدة مع المتصفحات؟
نعم. تنتج الأداة صياغة CSS3 قياسية تدعمها جميع المتصفحات الحديثة دون الحاجة إلى بادئات قديمة.
كيف أصدّر التدرجات إلى Flutter أو SwiftUI؟
انقر «تصدير الشيفرة والعينات» واختر Flutter أو SwiftUI لإنشاء مقاطع شيفرة أصلية جاهزة للإنتاج.