منشئ ظلال الصناديق CSS
جديدأنشئ ظلال صناديق CSS متعددة الطبقات بإعدادات جاهزة ومعاينة مباشرة. انسخ شيفرة CSS أو القيمة أو نمط React فورًا.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
أنشئ ظل CSS بصرياً — بلا تجربة وخطأ
يُحلّ مولّد ظل CSS المجاني هذا محلّ التخمين المضني في محرر الأكواد، ويمنحك لوحة بصرية مباشرة. حرّك شرائط الإزاحة والضبابية والانتشار والشفافية — يتحدّث الظل على عنصر المعاينة في الوقت الفعلي — والكود الجاهز للنسخ ينتظرك في الأسفل بالتنسيق الذي تختاره. لا يُرفع أي شيء إلى الخادم، ولا حاجة لحساب، وكل العمليات الحسابية تجري محلياً في متصفحك.
ابدأ بأحد الإعدادات المسبقة الثمانية المضمّنة أو من طبقة فارغة. أضف طبقات ظل متعددة لبناء تأثيرات عمق واقعية، وبدّل بين الخلفية الداكنة والفاتحة للتحقق من التباين، ثم اختر تنسيق الإخراج: تعريف خاصية CSS الكاملة، أو قيمة الظل منفردةً، أو سلسلة نصية بصيغة camelCase جاهزة لـ React. يشمل المولّد كل شيء من الارتفاع الخفي للبطاقات إلى بروز النيومورفيك وتأثيرات التوهج النيوني.
فهم المعاملات الستة لـ box-shadow
الإزاحة X وY تضعان الظل نسبةً للعنصر — X الموجبة تحركه يميناً، وY الموجبة تحركه للأسفل. الإزاحات السالبة تحركه يساراً أو للأعلى، مفيدة لتأثيرات الظل المضاء من الأعلى. نصف قطر الضبابية يتحكم في ليونة الحافة: القيمة صفر تعطي خطاً حاداً وواضحاً؛ القيم الأكبر تُنشئ تلاشياً تدريجياً منتشراً يبدو عمقاً طبيعياً. نصف قطر الانتشار يوسّع الظل أو يقلّصه قبل تطبيق الضبابية — الانتشار السالب مع ضبابية كبيرة يُبقي الظل داخل بصمة العنصر الطبيعية، وهي التقنية وراء أكثر ظلال البطاقات واقعية.
اللون عادةً ما يكون قيمة داكنة شبه شفافة مثل `rgba(0, 0, 0, 0.12)` للارتفاع المحايد، أو لوناً زاهياً لتأثيرات التوهج. شريط الشفافية يتيح ضبط ألفا بشكل مستقل عن منتقي الألوان. زر التبديل Inset يعكس اتجاه الظل، ويرسمه داخل إطار الحد لإنشاء تجاويف غائرة، ومدخلات منقوشة، وحالات الزر المضغوط — وهي إمكانيات لا تستطيع `filter: drop-shadow()` تكرارها.
ظلال متعددة الطبقات لعمق احترافي وواقعي
ظل كبير وحيد يبدو اصطناعياً — يشبه مرشّح Drop Shadow العام في فوتوشوب لا الضوء الحقيقي. الواجهات الاحترافية تستخدم ثلاث إلى خمس طبقات ظل مكدّسة تتضاعف فيها الإزاحة والضبابية تقريباً مع تنصيف الشفافية في كل طبقة. هذه التقنية تحاكي الطريقة التي يتشتّت بها الضوء فعلياً من مصدره، وتخلق ظلاً يبدو طبيعياً بأي حجم أو مسافة مشاهدة.
يدعم هذا المولّد ما يصل إلى ثماني طبقات مستقلة. كل طبقة تملك إزاحتها وضبابيتها وانتشارها ولونها وشفافيتها وزر تبديل Inset الخاص بها. أيقونة العين على كل طبقة تتيح تبديل الرؤية للمقارنة الفورية قبل وبعد دون حذف الطبقة. يُظهر الإعداد المسبق Deep مكدّساً تدريجياً بثلاث طبقات؛ ويستخدم Floating طبقتين متكاملتين للإيحاء برفع العنصر فوق الصفحة؛ ويُعيد Material إنتاج مواصفة الارتفاع متعددة الطبقات لـ Google Material Design.
الإعدادات المسبقة: بطاقة، حاد، نيومورفيك، توهج، وأكثر
يُنتج الإعداد المسبق Soft card ارتفاعاً بالكاد مرئياً — مجرد رفع كافٍ لفصل بطاقة بيضاء عن الصفحة دون منافسة محتواها. Crisp يعطي ظلاً بلا ضبابية وحوافه حادة، شائع في توجهات التصميم البروتالي والكلاسيكي. Material يُعيد إنتاج مواصفة الظل متعدد الطبقات لـ Google Material Design للتطبيقات ذات نظام العمق بأسلوب Android المألوف.
Neumorphic يجمع إضاءة ساطعة في أعلى اليسار مع ظل داكن في أسفل اليمين لجعل العنصر يبدو بارزاً من سطح مطابق. Glow Blue يُظهر كيف يُنشئ ظل ملوّن بإزاحة صفرية زراراً مضيئاً أو لمسةً بارزة في القسم الرئيسي — غيّر اللون ليتناسب مع علامتك التجارية. Inset Well يُظهر تقنية inset لعناصر الواجهة الغائرة كمدخلات النص وحالات الضغط. قم بتحميل أي إعداد مسبق وضبط الشرائط لتحريكه تحديداً إلى ما يحتاجه تصميمك.
box-shadow مقابل filter: drop-shadow مقابل ظلال Figma — أيها تستخدم؟
box-shadow تستهدف إطار الحد المستطيل للعنصر. filter: drop-shadow() تتبع ملامح قناة ألفا للعنصر — صحيح لصور PNG الشفافة وقصاصات SVG لكنها تفتقر إلى دعم inset وانتشار الظل والتكديس متعدد الطبقات. لكل عنصر واجهة مستخدم قياسي (بطاقات، أزرار، نوافذ حوارية، لوحات)، `box-shadow` هي الأداة الصحيحة.
Figma وAdobe XD يقدّمان لوحات تصميم الظل، لكن مخرجاتهما قيم أداة تصميم — ليست دائماً متوافقة مع CSS بدون تحويل يدوي. يُنتج هذا المولّد CSS صالحاً وجاهزاً للإنتاج مباشرةً، مما يُلغي خطوة الترجمة. على خلاف المستوى المجاني المحدود لـ Figma أو نموذج اشتراك Adobe XD، يعمل UtiloKit بالمجان تماماً في أي متصفح دون تثبيت، وينتج تنسيقات إخراج متعددة (CSS، قيمة، React) دون الحاجة إلى حساب أداة تصميم.
الأداء والخصوصية وثلاثة تنسيقات نسخ
`box-shadow` ثابت يُرسم مرة واحدة ويُركّب بتكلفة منخفضة — لا قلق من الأداء في معظم الواجهات. تحريكه مباشرةً يُشغّل إعادة رسم في كل إطار. البديل الأفضل أداءً: أضف عنصر شبه وهمي `::after` مع الظل النهائي مطبّقاً عليه مسبقاً، ثم `transition: opacity` على هذا العنصر. يُركّب المعالج الرسومي الشفافية دون إعادة رسم الظل، مما يعطي تحريكاً سلساً بتكلفة إعادة رسم صفرية.
بمجرد ضبط ظلك، انسخ بالتنسيق الذي يحتاجه مشروعك: خاصية CSS للأوراق الأسلوبية، القيمة فقط لمتغيرات CSS أو خرائط SCSS، أو نمط React المضمّن لخصائص `style` في JSX ومكونات Styled Components. لا تُحفظ إعداداتك في خادم ولا تُرسل إلى أي مكان — أغلق التبويب وستختفي. احفظ الصفحة في المفضلة وعُد إليها كلما احتجت للعمل على تصميم ظل.
يعمل على سطح المكتب وiPhone وAndroid وكل متصفح حديث
مولّد الظل متجاوب بالكامل ويعمل على أي جهاز بمتصفح حديث. على سطح المكتب، تحصل على تخطيط ثلاثي الأعمدة مع مكدّس الطبقات على اليسار، والمعاينة المباشرة في الوسط، والكود المولّد على اليمين. على iPhone وAndroid، يتحوّل التخطيط إلى مكدّس عمودي مع شرائط محسّنة للمس ومنتقيات ألوان تستخدم منتقي الألوان الأصلي للنظام.
تستخدم كل أزرار النسخ Web Clipboard API المدعومة في Safari 13.1+، وChrome 66+، وFirefox 90+، وEdge 79+ — مما يعني أن وظيفة النسخ تعمل على متصفحات الجوال الحديثة بدون أي حل بديل. لا تنزيل للتطبيق، ولا إنشاء حساب، ولا حدود للاستخدام. افتح الرابط على أي جهاز وابدأ التصميم فوراً.
Frequently asked questions
ما هي خاصية CSS box-shadow وما الذي تفعله؟
خاصية CSS `box-shadow` تُضيف تأثير ظل واحد أو أكثر إلى عنصر HTML. كل ظل يُعرَّف بستة قيم كحد أقصى: كلمة `inset` الاختيارية، وإزاحة أفقية، وإزاحة عمودية، ونصف قطر الضبابية، ونصف قطر الانتشار، ولون. الإزاحات الأفقية الموجبة تدفع الظل يميناً؛ الإزاحات العمودية الموجبة تدفعه للأسفل. تُفصل الظلال المتعددة بفواصل وتُعرض من الأمام إلى الخلف. وهي آلية CSS الأساسية لإضافة العمق البصري وتسلسل الارتفاع وتأثيرات التوهج وتصميم النيومورفيك لمكوّنات الواجهة دون أي صور.
ما هو التركيب الصحيح لـ CSS box-shadow؟
التركيب الكامل هو: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. `offset-x` و`offset-y` و`color` فقط مطلوبة؛ يُعيَّن `blur-radius` و`spread-radius` افتراضياً بصفر عند حذفهما، و`inset` يعمل افتراضياً كظل خارجي. يبدو ظل بطاقة نموذجي هكذا: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. يمكن تكديس ظلال غير محدودة بفصلها بفواصل — تُعرض من الأمام إلى الخلف (الأول المذكور في الأعلى). يُخرج هذا المولّد التعريف الكامل بما فيه اسم الخاصية `box-shadow:`، أو القيمة وحدها إن فضّلت ذلك.
ما الفرق بين blur-radius وspread-radius في CSS؟
يتحكم blur-radius في ليونة الحافة: القيمة صفر تعطي حافة حادة ودقيقة تطابق شكل العنصر تماماً؛ القيم الأكبر تُنشئ تلاشياً تدريجياً أكثر انتشاراً. أما spread-radius فيوسّع الظل بأكمله أو يقلّصه قبل تطبيق الضبابية: القيم الموجبة تمدّه خارج حدود العنصر، والقيم السالبة تقلّصه للداخل. الظلال الأكثر واقعيةً تستخدم ضبابية متوسطة مع انتشار سالب قليلاً، مما يُبقي الظل قريباً من بصمة العنصر دون انتشار مبالغ. هذه هي التقنية المستخدمة في الإعدادات المسبقة Deep وFloating.
كيف أصنع ظل CSS داخلي (inset) في CSS؟
أضف كلمة `inset` في بداية تعريف الظل: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. الظل الداخلي يُرسم داخل إطار حد العنصر لا خلفه، مما يُنشئ مظهراً غائراً أو مضغوطاً. الاستخدامات الشائعة تشمل: حقول الإدخال (لإظهار عمق التركيز)، ومسارات مفاتيح التبديل، وحالات نشاط زر الضغط، وحاويات النص المنقوش. يحتوي هذا المولّد على زر تبديل Inset في لوحة تحكم كل طبقة — فعّله وسيتقلّب الظل فوراً إلى الداخل في عنصر المعاينة.
هل يمكنني تكديس ظلال box-shadow متعددة على عنصر واحد؟
نعم — يسمح CSS بأي عدد من الظلال المفصولة بفواصل على عنصر واحد. تُعرض بالترتيب المذكور، مع الظل الأول في الأعلى. تكديس طبقات متعددة هو التقنية الأساسية للعمق السلس والواقعي — ظل كبير واحد يبدو اصطناعياً، بينما ثلاث إلى خمس طبقات متدرّجة تحاكي الطريقة التي يتشتّت بها الضوء فعلياً. يدعم هذا المولّد ما يصل إلى ثماني طبقات مستقلة، لكل منها إزاحتها وضبابيتها وانتشارها ولونها وشفافيتها وزر تبديل inset. أيقونة العين تتيح إظهار/إخفاء الطبقات الفردية للمقارنة السريعة قبل وبعد دون حذفها.
كيف أصنع ظلاً نيومورفيكاً (neumorphic) في CSS؟
يستخدم النيومورفيزم ظلّين متعارضين على عنصر تتطابق خلفيته مع لون الصفحة: ظل ساطع (قريب من الأبيض) يشير لأعلى اليسار، وظل داكن (أسود بشفافية منخفضة) يشير لأسفل اليمين. هذا يجعل العنصر يبدو بارزاً من سطح الخلفية. تعريف نيومورفيك كلاسيكي: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. يجب أن تتطابق خلفية العنصر مع خلفية الصفحة تماماً لكي تعمل الوهم. يوفر الإعداد المسبق Neumorphic في هذا المولّد نقطة بداية جاهزة — بدّل خلفية المعاينة إلى 'Soft grey' لرؤيته في سياقه.
كيف أصنع تأثير توهج (glow effect) باستخدام box-shadow؟
استخدم إزاحة صفرية، ونصف قطر ضبابية كبيراً، وقيمة ملوّنة: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. الإزاحة الصفرية تجعل التوهج ينتشر بالتساوي في جميع الاتجاهات. الانتشار الموجب يدفع التوهج أبعد عن العنصر. الجمع بين طبقتين — واحدة بضبابية أصغر وشفافية أعلى لنواة ساطعة، وأخرى بضبابية كبيرة وشفافية أقل للهالة المحيطة — يُنتج تأثيراً أكثر إقناعاً. يُظهر الإعداد المسبق Glow Blue هذا بأسلوب طبقتين. غيّر اللون لأي درجة لتوهجات تشكيلية مخصصة.
كيف أصنع ظلاً متعدد الطبقات سلساً وواقعياً؟
بدلاً من ظل كبير واحد، كدّس ثلاث إلى خمس طبقات تتضاعف فيها الإزاحة والضبابية تقريباً مع تنصيف الشفافية: مثلاً `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. هذه التقنية تحاكي الطريقة التي يتشتّت بها الضوء فعلياً من مصدر نقطي وتبقى مقنعة عند أي مستوى تكبير أو دقة عرض. الإعداد المسبق Deep والإعداد Floating في هذا المولّد مبنيان على هذا المبدأ تحديداً — ثلاث طبقات متدرّجة تبدو طبيعية بأي مقياس.
ما الفرق بين box-shadow وfilter: drop-shadow()؟
`box-shadow` تتبع دائماً إطار الحد المستطيل للعنصر بغض النظر عن مظهره البصري. `filter: drop-shadow()` تتتبع ملامح قناة ألفا الفعلية للعنصر — مفيدة لقصاصات PNG الشفافة وأيقونات SVG عندما تريد للظل أن يتبع الشكل لا مستطيله الحدودي. لمكوّنات الواجهة القياسية (البطاقات والأزرار واللوحات ونوافذ الحوار)، `box-shadow` هي الصحيحة: أسرع في الرسم، وتدعم وضع inset، وتقبل انتشار الظل، وتسمح بتكديس طبقات متعددة. استخدم `filter: drop-shadow()` فقط عندما تهمّ خلفية العنصر الشفافة لشكل الظل.
هل يؤثر box-shadow على تخطيط CSS أو مناطق النقر؟
لا. `box-shadow` مجرد تأثير بصري يُعرض خارج تدفق التخطيط الطبيعي. لا يدفع العناصر الجانبية قط، ولا يزيد من مساحة المحتوى القابلة للتمرير، وليس له أي تأثير على العرض أو الارتفاع أو الهامش أو الحشو المحسوب للعنصر. تمتد الظلال بصرياً خارج إطار العنصر لكن محرك التخطيط يتجاهلها. هذا يعني أنك تستطيع إضافة ظلال سخية لشبكة مضغوطة دون كسر التخطيط — رغم أنك قد ترغب في إضافة `overflow: visible` على الحاوية الأم لضمان عدم قصّ الظل.
كيف أنسخ CSS المولّد بصيغة React أو Tailwind؟
بعد بناء ظلك، يوفر المولّد ثلاثة تنسيقات إخراج. <strong>نسخ CSS</strong> يعطي تعريف الخاصية الكامل (`box-shadow: …;`) جاهزاً لأي ورقة أسلوب. <strong>نسخ القيمة</strong> يعطي قيمة الظل فقط — مفيد كمتغير SCSS، أو قيمة متغير CSS مخصص، أو إدخال `extend.boxShadow` في Tailwind. <strong>نمط React</strong> يُخرج تنسيق camelCase (`boxShadow: '…'`) لكائنات النمط المضمّن في JSX أو Styled Components. لـ Tailwind، الصق القيمة في `tailwind.config.js` تحت `theme.extend.boxShadow` لإنشاء فئة أداة ظل مخصصة.
هل هذا المولّد أفضل من cssgenerator.org أو css-box-shadow.com؟
تقدّم معظم أدوات box-shadow المخصصة توليداً بطبقة واحدة فقط — cssgenerator.org مثلاً يوفر تحكمات أساسية لكن بلا مكتبة إعدادات مسبقة ولا تكديس متعدد الطبقات. مرجع css-tricks.com توثيق لا أداة تفاعلية. مولّدات CSS في cssmatic.com وظيفية لكنها قديمة وثقيلة بالإعلانات. يدعم مولّد UtiloKit ما يصل إلى ثماني طبقات مستقلة مع أزرار عين لكل طبقة، وثمانية إعدادات مسبقة منتقاة تغطي أكثر أنماط تصميم الظل شيوعاً (بطاقة، حاد، مادي، نيومورفيك، عائم، عميق، توهج، تجويف داخلي)، وثلاثة تنسيقات إخراج لأطر عمل مختلفة، وتبديل كامل بين الخلفية الداكنة والفاتحة لفحص التباين — كل ذلك بدون إعلانات وصفر رفع للبيانات.
هل تعمل الأداة على الجوال — iPhone وAndroid؟
نعم — مولّد الظل متجاوب بالكامل. على iPhone وAndroid، جميع الشرائط محسّنة للمس مع مقابض سحب بحجم مناسب. عنصر المعاينة المباشرة يتكيّف مع شاشات الجوال. منتقيات الألوان تستخدم منتقي الألوان الأصلي للنظام على متصفحات الجوال. يتحوّل تخطيط سطح المكتب ثلاثي الأعمدة إلى تخطيط عمودي أحادي العمود نظيف على الشاشات الضيقة. تستخدم كل أزرار النسخ Web Clipboard API المدعومة في Safari وChrome وFirefox على iOS وAndroid. لا يلزم تنزيل تطبيق، ولا حاجة لحساب — افتح الرابط وابدأ التصميم.
Related tools
عرض كل الأدوات
جديد منشئ منحنى Cubic Bezier
صمّم منحنى تسارع CSS بسحب نقاط التحكم، مع معاينة مباشرة.
جديد منشئ استدارة الحواف
صمّم زوايا CSS مستديرة وأشكالًا عضوية انسيابية بصريًا.
جديد ساحة تجربة CSS Flexbox
اضبط خصائص flex مع معاينة مباشرة وانسخ شيفرة CSS.
جديد ساحة تجربة CSS Grid
اضبط أعمدة الشبكة والفجوات والمحاذاة مع معاينة مباشرة وشيفرة CSS.
جديد منشئ تأثير الزجاج Glassmorphism
صمّم بطاقة زجاجية ضبابية وانسخ شيفرة CSS، مع معاينة مباشرة.
جديد منشئ ظلال النص CSS
اضبط ظل نص CSS مع معاينة مباشرة وانسخ الشيفرة.