أدوات CSS

أنشئ شيفرة CSS نظيفة جاهزة للنسخ واللصق بصريًا باستخدام هذه الأدوات المجانية — ظلال الصناديق والتدرّجات وانحناء الحواف وflexbox وgrid والحركات وclip-path والمرشّحات — مع معاينة حيّة أثناء ضبطك لكل قيمة.

الظلال والمرشحات واللمسات الأخيرة

مولّد ظل الصندوق CSS

صمّم ظل الصندوق box-shadow بصريًا مع معاينة حية وانسخ كود CSS.

مولّد ظل النص CSS

صمّم ظل النص text-shadow مع معاينة حية وانسخ كود CSS.

مولّد النيومورفيزم

أنشئ ظلالًا نيومورفية بواجهة ناعمة مع معاينة مباشرة ونسخ.

مولّد تأثير الزجاج (Glassmorphism)

أنشئ كود CSS لبطاقة بتأثير الزجاج المصنفر مع ضبابية وشفافية وتشبّع ولون صبغة.

مولّد فلاتر CSS

ركّب فلاتر CSS بأشرطة تمرير ومعاينة مباشرة، ثم انسخها.

حدود نص CSS

أضف حدًّا أو إطارًا للنص وانسخ كود CSS.

مُنسّق شريط تمرير CSS

نسّق شريط تمرير مخصصًا وانسخ كود ::-webkit-scrollbar في CSS.

الأشكال والتدرجات والخلفيات

مولّد استدارة الحواف CSS

اضبط استدارة كل زاوية مع معاينة حية وانسخ كود CSS.

مولّد CSS clip-path

اقتطع عنصرًا إلى أشكال شائعة وانسخ كود CSS الخاص بـ clip-path.

مولّد المثلث CSS

ولّد مثلثًا بـ CSS خالص في أي اتجاه وانسخ كود CSS.

مولّد التدرّج اللوني CSS

أنشئ تدرّجًا خطيًا أو شعاعيًا مع معاينة حية وانسخ كود CSS.

نمط خلفية CSS

أنشئ نمط خلفية بـ CSS من لونين وانسخه.

التخطيط والتصميم المتجاوب

ساحة تجربة CSS Flexbox

جرّب خصائص flexbox على معاينة حية وانسخ كود CSS الناتج.

مولّد CSS Grid

أنشئ تخطيط CSS grid بأعمدة وصفوف وفجوة قابلة للتعديل، مع معاينة حية.

منشئ استعلامات CSS الإعلامية

أنشئ استعلام @media متجاوبًا بإعدادات جاهزة وانسخه.

صندوق نسبة عرض إلى ارتفاع CSS

ولّد صندوقًا متجاوبًا بنسبة عرض إلى ارتفاع مع بديل padding.

تخطيط متعدد الأعمدة في CSS

ولّد تخطيط نص متعدد الأعمدة في CSS مع خط فاصل.

الحركة والتحويلات والرسوم المتحركة

مولّد CSS Transform

ادمج translate وrotate وscale وskew في تحويل CSS واحد مع معاينة حية.

مولّد رسوم CSS المتحرّكة

أنشئ رسمًا متحرّكًا بإطارات مفتاحية، عاينه مباشرة وانسخ كود CSS.

مولّد منحنيات التسهيل في CSS

اختر أو ابنِ منحنى تسهيل cubic-bezier وأعد تشغيله على نقطة معاينة متحركة.

مولّد دوّار CSS

أنشئ دوّار تحميل بـ CSS خالص وانسخ الكود.

لا توجد أدوات مطابقة لذلك.

تصفّح فئات أخرى