أدوات CSS

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

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

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

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

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

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

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

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

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

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

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

ساحة تجربة CSS Flexbox

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

مولّد CSS Grid

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

مولّد CSS Transform

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

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

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

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

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

مولّد CSS clip-path

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

مولّد فلاتر CSS

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

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

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

مولّد دوّار CSS

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

نمط خلفية CSS

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

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

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

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

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

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

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

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

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

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

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

حدود نص CSS

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

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

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