مولد الظل الصندوقي

اسحب أشرطة التمرير لتشكيل box-shadow، وقم بتكديس الطبقات للحصول على العمق، وانسخ CSS النهائي فورًا.

طبقات الظل
طبقة 1
CSS
اضبط أشرطة التمرير لتشكيل ظلك.

يُعرض كل ظل في متصفحك. لا يتم رفع أي إعداد تختاره هنا إلى BroBroGo.

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

ما الذي يتحكم به فعليًا الإزاحة والتمويه والانتشار؟

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

ماذا يفعل خيار الظل الداخلي؟

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

لماذا تكديس أكثر من طبقة ظل واحدة؟

يبدو الظل الواحد مسطحًا بعد حجم معين. عادةً ما يجمع الارتفاع الحقيقي بين ظل داكن وضيق وظل ناعم وأوسع - أضف طبقة ثانية وقم بضبط كل منهما بشكل مستقل للحصول على هذا التأثير.

CSS مولد بيزير مكعباسحب المقبضين لتشكيل منحنى تسارع، وشاهد نقطة تتحرك عليه بجانب نقطة ثابتة السرعة، ثم انسخ قيمة cubic-bezier().مولّد التدرجاتأنشئ تدرجًا خطيًا أو شعاعيًا أو مخروطيًا، وأضف توقفات لونية وحدد الاتجاه، ثم انسخ CSS بنقرة واحدة.مولّد تدوير الزوايادوّر كل زاوية باستخدام أشرطة التمرير، وأنشئ أشكالًا فقاعية عضوية بالوضع البيضاوي، وانسخ CSS فورًا.مولد فليكس بوكسقم بإعداد حاوية مرنة وعناصرها باستخدام عناصر التحكم المرئية، وشاهد التفاعل المباشر للتخطيط، وانسخ CSS بنقرة واحدة.مولّد شبكة CSSحدد الأعمدة والصفوف، واسحب عبر الخلايا لوضع العناصر، ثم انسخ CSS للشبكة مع HTML المطابق بنقرة واحدة.حاسبة CSS clamp()أدخل حجمًا للشاشات الصغيرة وآخر للشاشات الكبيرة لتحصل على قيمة clamp() مرنة تتغير بسلاسة بينهما، سواء لحجم الخط أو الحشو أو الهوامش أو الفجوات.محوّل الألوانحوّل الألوان بين HEX وRGB وHSL وHSV وCMYK وLAB؛ عدّل أي حقل لتتحدّث بقية القيم فورًا.محسّن تنسيق CSS ومصغّرهأعد ضبط المسافات البادئة في CSS غير المرتب لقراءته، أو صغّره للنشر، مع وضع آمن لا يعيد ترتيب قواعدك.فاحص التباينأدخل لوني النص والخلفية لمعرفة نسبة تباين WCAG ومستويات AA وAAA المستوفاة.