مولد ظلال مربع CSS (متعددة الطبقات والإدخال)

تصميم ظلال مربع CSS سلسة متعددة الطبقات مع الفوهات الحية ، والانتشار ، وتبديل الإدخال ، ونقل رمز Tailwind / CSS بنقرة واحدة.

يعمل في متصفحك. ملفاتك لا تغادر جهازك أبدًا. شاهد كيف تتحقق

…

كيف تفعل ذلك

  1. 1
    الخطوة 1: افتح مولد ظلال مربع CSS (متعددة الطبقات والإدخال) وأدخل بياناتك

    اكتب أرقامك أو نصك، أو أضف ملفك، أو اختر الخيارات التي تحتاجها. لا يتم رفع أي شيء: كل شيء يبقى في متصفحك.

  2. 2
    الخطوة 2: ماذا يفعل مولد ظلال مربع CSS (متعددة الطبقات والإدخال)

    تصميم ظلال مربع CSS سلسة متعددة الطبقات مع الفوهات الحية ، والانتشار ، وتبديل الإدخال ، ونقل رمز Tailwind / CSS بنقرة واحدة.

  3. 3
    الخطوة 3: اقرأ النتيجة وقارنها

    تظهر النتيجة فورًا. غيّر قيمة واحدة لترى كيف تتغير الإجابة، ثم احتفظ بالرقم الذي يناسب حالتك.

  4. 4
    الخطوة 4: انسخ النتيجة أو احفظها

    انسخ النتيجة أو نزّلها. وقبل أي قرار مهم، تأكد منها من المصدر الرسمي أو من مستشار.

عن هذه الأداة

إضافة عمق وارتفاع لمسة إلى البطاقات وعناصر واجهة المستخدم. تخصيص التراجع الأفقي / الرأسي ، نصف قطر الضباب ، المسافة الانتشارية ، ولون الظل مع شريحة التحريك الشمسية . اختبار ضد الخلفيات الخفيفة والظلامة ، وتبديل ظلال الإدراج لحالات زر المضغوط ، ونسخ فئات CSS أو Tailwind القياسية على الفور.

نصائح لأفضل النتائج

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

حقائق سريعة

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

كيف يمكنني إنشاء ظلّ هبوطي ناعم وحديث؟

استخدم نصف قطر ضباب أكبر (20px-40px) ، وانتشار سلبي (-4px) ، ونسبة غامضة منخفضة (10٪ -25٪) على لون شفرات داكن للظل الناعم للغاية.

هل هذا الدعم يضع ظلال داخلية؟

نعم، قم بتشغيل زر "إدخال الظل" لإنشاء تأثيرات ظلال داخلية مثالية لمناطق الإدخال والآبار وحالات الأزرار المضغوطة.

هل يمكنني اختبار كيف يبدو الظل على بطاقات الوضع المظلم؟

نعم، انقر فوق "اللوحة المظلمة" لاختبار تباين الظلال على خلفيات عميقة ومظلمة

هل CSS المولدة متوافقة مع جميع المتصفحات؟

نعم، إنه يولد قواعد صيغة متوافقة مع الـ W3C و تدعمها جميع برامج المراقبة الحديثة

مجاني تمامًابلا تكلفة وبلا تسجيل
ملفات خاصةكل شيء يعمل في متصفحك
سهل بلغتكمتوفر بلغات كثيرة