🔲 مُولّد ظل CSS Box-Shadow
احصل على شفرة ظل CSS الخاصة بك في ثوانٍ - بدون تثبيت، بدون حساب، بدون اتصال بالإنترنت مطلوب. اسحب المنزلقات لتحديد التحريك، والضباب، والانتشار، واللون، والشفافية لكل طبقة ظل، وراقب تحديث معاينة المعاينة الحية فورًا، ثم انسخ الشفرة الجاهزة لللصق.
مُعاينة
مصمم للخصوصية. تعمل هذه الأداة بالكامل في متصفحك — لا يتم رفع أي شيء تدخله أو تخزينه، وتعمل الأداة دون اتصال بالإنترنت.
حول
تعمل هذه الأداة بالكامل في متصفحك باستخدام JavaScript العادي - لا تغادر تصميماتك جهازك أبدًا. يمكنك تراكم عدة طبقات من الظلال لإنشاء تأثيرات العمق، والنيومورفيزم، والتأثيرات اللامعة، أو التأثيرات البسيطة لرفع البطاقات. تدعم كل طبقة ظلال داخلية لتأثيرات الإضاءة الداخلية أو مظهر الزر المضغوط. الناتج هو CSS قياسي يمكنك إدراجه مباشرة في أي ملف stylesheet أو إطار عمل أو رموز التصميم.
كيف تستخدم
- انقر على '+ إضافة ظل' لإنشاء طبقة الظل الأولى.
- استخدم مُحددات الإزاحة X، الإزاحة Y، الضباب، الانتشار، والشفافية لتشكيل كل ظل. اضغط على 'الداخلية' لتأثير ظل داخلي.
- انقر على علامة اللون لاختيار لون الظل المطلوب. يتم تحديث المعاينة مباشرة أثناء تعديل كل تحكم.
- أضف طبقات إضافية للحصول على تأثيرات ظلال معقدة مثل النيومورفيزم أو الإضاءة المتراكمة.
- انقر على 'نسخ CSS' لنسخ إعلان box-shadow الكامل ولصقه في ملف نمطك.
الأسئلة الشائعة
- هل هذا مُنشئ ظل CSS مجاني؟
- نعم، مجاني تمامًا. لا يوجد حساب، ولا فترة تجريبية، ولا تكاليف مخفية — فقط افتح الصفحة وابدأ بإنشاء الظلال.
- هل يعمل دون اتصال بالإنترنت؟
- نعم. تعمل الأداة بالكامل في متصفحك دون أي مكالمات للخادم. بمجرد تحميل الصفحة، يمكنك الانفصال عن الإنترنت والعمل بشكل مثالي.
- هل بيانات تصميمك خصوصية؟ هل يتم رفع أي شيء؟
- لا يتم رفع أي شيء. يتم معالجة إعدادات الظلال جميعها محليًا في متصفحك وتُحفظ فقط في تخزين المتصفح المحلي. لا تغادر أي بيانات جهازك أبدًا.
- هل يمكنني تجميع عدة ظلال في قاعدة CSS واحدة؟
- نعم. انقر على '+ إضافة ظل' عدة مرات حسب الحاجة. تجمع الأداة جميع الطبقات في قيمة box-shadow واحدة مفصولة بفواصل — مثالية للنيومورفيزم أو تأثيرات الإضاءة أو العمق متعدد الاتجاهات.
- كيف أقوم بإنشاء تأثير ظل داخلي (inner shadow)؟
- تحقق من خانة 'Inset' في أي طبقة ظل. يظهر الظل الداخلي داخل حدود العنصر، وهو مفيد لحالات الأزرار المضغوطة أو تأثيرات الإضاءة الداخلية. تلقائيًا، يحتوي الكود CSS الناتج على كلمة 'inset'.
- هل هذه الأداة ترفع بياناتي؟
- لا. يعمل كل شيء مباشرة في متصفحك، لذا بياناتك لن تغادر جهازك أبداً — بل إنها تعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.