التصميم و CSS

حوّل مقتطف كود إلى بطاقة PNG أنيقة بإبراز لتركيب الجملة داخل متصفحك، مع سمة وخلفية متدرجة أو شفافة وحشوة — دون أي رفع.

افحص نسبة تباين WCAG بين لون أمامي ولون خلفية بصيغة HEX وتعرّف على ما إذا كانت تجتاز المستويين AA وAAA لكل من النص العادي والنص الكبير.

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس درجات بأسلوب Tailwind من 50 إلى 950، بالمزج نحو الأبيض والأسود، مع عيّنة لونية لكل خطوة وقيمة HEX قابلة للنسخ.

ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.

اضبط جميع قيم الزوايا الثماني لـ border-radius، بما فيها نصفا القطر الأفقي والرأسي للشكل الإهليلجي، لتشاهد معاينة حية للمربع وتنسخ CSS المختصر.

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

حوّل حجم خط أدنى وأقصى مع عرض إطار عرض أدنى وأقصى إلى تعبير clamp() واحد للطباعة المرنة في CSS بلا نقاط توقف.

أنشئ خاصية CSS clip-path من إعدادات مسبقة للدائرة أو الشكل البيضاوي أو المضلّع أو inset أو inset المُدوّر باستخدام حقول رقمية، وعاينها مباشرةً، وانسخ الخاصية الجاهزة للاستخدام.

حرّر نقاط التحكم الأربع لمنحنى التخفيف cubic-bezier في CSS، واسحب المقابض أو اكتب القيم، وعاين المنحنى، وانسخ دالة cubic-bezier().

عدّل خصائص الحاوية لـ Flexbox أو Grid في CSS، وشاهد التخطيط المرئي يتحدّث مباشرة، ثم انسخ الـ CSS المُولّد.

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