هل الكود الناتج متوافق مع كل المتصفحات؟

نعم، الكود يستخدم خاصية radial-gradient القياسية في CSS، وهي مدعومة في كل المتصفحات الحديثة دون الحاجة لأي بادئات خاصة.

مولّد تدرجات الشبكة اللونية

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

أدوات التصميم وCSS يعمل محليًا بالكامل

تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.

عدد نقاط اللون5اللون الأساسي

كود CSS

background-color: #f5f3ff;
background-image: radial-gradient(at 34% 34%, #e4cd67 0px, transparent 50%), radial-gradient(at 66% 25%, #8de467 0px, transparent 50%), radial-gradient(at 84% 63%, #e4677a 0px, transparent 50%), radial-gradient(at 31% 33%, #67e482 0px, transparent 50%), radial-gradient(at 55% 55%, #cde467 0px, transparent 50%);

ما الذي تفعله هذه الأداة

تولّد تدرّجًا شبكيًا — خلفية ناعمة متعددة البؤر اللونية — من لون أساسي وعدد نقاط تحدّده، وتعطيك شيفرة CSS.

متى تستخدمها

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

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

أدخل «اللون الأساسي».
اضبط «عدد نقاط اللون».
اضغط «توليد عشوائي جديد» حتى يعجبك الناتج.
انسخ «شيفرة CSS».

مثال عملي

المُدخَل

لون أساسي مع أربع نقاط لونية.

الناتج

خلفية ناعمة تتداخل فيها أربع بؤر لونية، بشيفرة CSS جاهزة.

حدود الأداة

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

الخصوصية والمعالجة

التدرّج يُولَّد على جهازك وألوانك لا تغادره.

ملاحظات تقنية

التدرّج الشبكي يُبنى من عدة تدرّجات شعاعية متراكبة، ولهذا شيفرته أطول من التدرّج الخطي وأثقل قليلًا في العرض.

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

أداة تدرج CSS تنشئ تدرجًا خطيًا أو دائريًا بسيطًا بين لونين، بينما هذه الأداة تطبّق عدة نقاط لونية عشوائية متراكبة لإنشاء خلفية ناعمة متعددة الألوان بأسلوب Mesh Gradient العصري.