الأدوات · CSS
أدوات CSS المجانية
أدوات مرئية لأكواد CSS التي كنت ستعدّلها بالتجربة والخطأ: اسحب تدرجًا، وكدّس ظلالًا، وشكّل استدارة الحواف أو clip-path، وارسم منحنى حركة، ورتّب flexbox وgrid بمعاينة حيّة، وصغّر ملف أنماط أو نسّقه. انسخ الكود الجاهز؛ لا شيء يُرفع.
مولّد تدرّج CSS
أنشئ تدرّج CSS خطيًا أو شعاعيًا أو مخروطيًا وانسخ الكود.
مولّد ظل CSS
أنشئ ظلًا متعدد الطبقات بخاصية box-shadow في CSS مع معاينة حيّة، ثم انسخ الكود.
مولّد استدارة الزوايا
شكّل كل زاوية من زوايا الصندوق على حدة، أو ادمجها في شكل عضوي غير منتظم، وانسخ كود border-radius.
مولّد تأثير الزجاج المصنفر
أنشئ بطاقة زجاجية مصنفرة بتمويه خلفية وشفافية وحدّ ناعم، وانسخ كود CSS.
مولّد منحنى cubic-bezier
اسحب منحنى لبناء قيمة تسهيل cubic-bezier()، شاهدها تعمل مع انتقال CSS حي، وانسخ الكود.
مولّد clip-path
أنشئ شكل قصّ CSS (clip-path) - مضلع أو دائرة أو بيضاوي أو مستطيل داخلي - مع معاينة حيّة، وانسخ الكود.
مصغّر ومنسّق CSS
صغّر أو نسّق كود CSS، حيًا أثناء اللصق، بالكامل داخل متصفحك.
معمل Flexbox
أنشئ تخطيط CSS flexbox - الاتجاه والالتفاف والتسوية والمحاذاة والفجوة، ونمو وانكماش وأساس كل عنصر - مع معاينة حيّة، وانسخ الكود.
معمل Grid
أنشئ تخطيط CSS grid - عدد المسارات والفجوات والمحاذاة، وموضع كل عنصر - مع معاينة حيّة، وانسخ الكود.