✨ صانع التدرج
background: linear-gradient(to right, #ff6b6b, #6bc1ff);
أنشئ تدرجات CSS خطية وشعاعية مذهلة باستخدام أداة إنشاء التدرجات سهلة الاستخدام الخاصة بنا. اختر الألوان، حدد الاتجاهات، وانسخ كود CSS على الفور لمشاريع الويب الخاصة بك.
أنشئ كولاجات بصرية مذهلة بدمج صورك مع لوحات الألوان المستخرجة. قم بتحميل أي صورة لاستخراج ألوانها المهيمنة تلقائيًا وإنشاء تركيبات جميلة بتخطيطات وأنماط ونسب أبعاد قابلة للتخصيص.
أنشئ، اعرض، وادِر لوحات الألوان بميزات متقدمة. أنشئ لوحات باستخدام نظرية الألوان، استورد من تنسيقات متنوعة، تحقق من تباين إمكانية الوصول، وصدّر إلى تنسيقات CSS، SCSS، Tailwind، JSON، أو PNG.
حوّل ألوان HSV (الصبغة، التشبع، القيمة) إلى أقرب مطابقاتها من ألوان بانتون على الفور. اعثر على لون بانتون المثالي باستخدام أداة مطابقة الألوان الشاملة لدينا، والتي تتميز بمقارنات بصرية وعلوم ألوان دقيقة.
حوّل ألوان RGB إلى أقرب تطابقات ألوان بانتون لها باستخدام خوارزمية مطابقة الألوان المتقدمة لدينا. تصفح ألوان بانتون المنسقة، قارن اختلافات الألوان، واحصل على رموز ألوان دقيقة لمشاريع التصميم.
حوّل ألوان الهيكس إلى أقرب تطابقات بانتون باستخدام أداتنا المجانية عبر الإنترنت. تتميز بمطابقة ألوان دقيقة بتقنية دلتا إي (Delta E)، وتصفح أكثر من 40 لونًا شائعًا من بانتون، واحصل على مقارنات ألوان فورية. مثالية للمصممين والطابعين ومحترفي الألوان.
تحقق من نسب تباين الألوان لامتثال إمكانية الوصول إلى الويب. اختبر مجموعات ألوان النص والخلفية مقابل إرشادات WCAG مع معاينة فورية، وتقييمات إمكانية الوصول، واقتراحات التحسين.
حدد اللون الأول والثاني باستخدام منتقي الألوان أو أدخل رموز الألوان السداسية (hex) مباشرة في حقول الإدخال النصية.
اختر بين التدرج الخطي لانتقالات الألوان الاتجاهية أو التدرج الشعاعي (الدائري) لانتقالات الألوان الدائرية من المركز إلى الخارج.
بالنسبة للتدرجات الخطية، اختر من 8 خيارات اتجاهات بما في ذلك الاتجاهات اليمين، اليسار، الأعلى، الأسفل، والقطرية باستخدام أزرار الأسهم.
انقر على زر 'نسخ CSS' لنسخ خاصية خلفية CSS الكاملة إلى حافظتك، جاهزة للصق في ملفات الأنماط (stylesheets) الخاصة بك.
أنشئ تدرجات خطية وشعاعية مع تحكم كامل في اختيار الألوان واتجاه التدرج. بدّل بين أنواع التدرجات على الفور.
اختر من 8 اتجاهات مختلفة للتدرجات الخطية بما في ذلك الاتجاهات الأفقية والعمودية والقطرية باستخدام عناصر تحكم الأسهم البديهية.
ولّد مجموعات ألوان عشوائية على الفور لاكتشاف أفكار تدرجات جديدة ومخططات ألوان إبداعية لمشاريعك.
انسخ كود تدرج CSS الذي تم إنشاؤه إلى حافظتك بنقرة واحدة. خاصية خلفية CSS جاهزة للاستخدام للتطبيق الفوري.
مولد تدرجات CSS هو أداة تنشئ تدرجات خلفية CSS عن طريق دمج لونين أو أكثر في انتقالات سلسة. يقوم صانع التدرجات الخاص بنا بتوليد خصائص CSS `linear-gradient` و `radial-gradient` التي يمكن استخدامها مباشرة في تطوير الويب. تنشئ التدرجات الخطية انتقالات لونية اتجاهية، بينما تنشئ التدرجات الشعاعية (الدائرية) انتقالات دائرية من نقطة مركزية. توفر الأداة معاينة في الوقت الفعلي وتولد كود CSS متوافقًا مع المتصفحات لمعايير الويب الحديثة.
شاهد تغييرات التدرج الخاصة بك على الفور مع منطقة معاينة كبيرة توضح بالضبط كيف سيبدو التدرج الخاص بك في مشاريع الويب الخاصة بك.
كود CSS الذي تم إنشاؤه محسن وجاهز للاستخدام مع صيغة صحيحة لخاصية الخلفية، ومتوافق مع جميع المتصفحات الحديثة.
أزرار أسهم سهلة الاستخدام لتحديد اتجاهات التدرج، مما يجعل من السهل إنشاء الاتجاه الذي تحتاجه لتصميمك بدقة.
يساعد مولد الألوان العشوائية على اكتشاف مجموعات ألوان جديدة ويوفر إلهامًا إبداعيًا لتصاميم التدرجات ومخططات الألوان الخاصة بك.
تنشئ التدرجات الخطية انتقالات لونية في اتجاه خط مستقيم (أفقي، عمودي، أو قطري)، بينما تنشئ التدرجات الشعاعية انتقالات لونية دائرية تتشعع من نقطة مركزية.
نعم، يمكنك إدخال أي رمز لون سداسي (hex) صالح مباشرة في حقول الإدخال النصية بجانب منتقي الألوان. تقبل الأداة رموز الألوان السداسية المكونة من 6 أرقام مثل #ff6b6b أو #6bc1ff.
انسخ كود CSS والصقه في ملف الأنماط (stylesheet) الخاص بك. الكود الذي تم إنشاؤه هو خاصية خلفية كاملة يمكنك تطبيقها على أي عنصر HTML لعرض التدرج.
نعم، يستخدم CSS الذي تم إنشاؤه صيغة `linear-gradient` و `radial-gradient` القياسية التي تدعمها جميع المتصفحات الحديثة بما في ذلك كروم، فايرفوكس، سفاري، وإيدج.
حاليًا، تركز أداتنا على تدرجات اللونين لتبسيط التصميم ونظافته. يمكنك تعديل كود CSS الذي تم إنشاؤه لإضافة نقاط توقف لونية إضافية إذا لزم الأمر.