CSS Playground

ابنِ التخطيطات والحركة بصرياً — flexbox وCSS Grid و@keyframes مع معاينة ونسخ وتنزيل فوري.

1
2
3
4

CSS المُولَّد

/* عدّل عناصر التحكم لإنشاء CSS */

CSS Playground على الإنترنت — تخطيط وحركة في المتصفح

Flexbox وCSS Grid والحركات في مساحة واحدة: تحكم يساراً، نتيجة فورية يميناً، CSS أسفل. كل شيء محلياً دون حساب.

css flexbox generator وcss grid generator وcss animation generator وonline css playground — CSS حقيقي.

مولّد CSS Flexbox

في تبويب Flexbox يبقى display: flex. جرّب flex-direction وjustify-content وalign-items وgap.

فئات .flex-container و.flex-item-N.

مولّد CSS Grid

أعمدة وصفوف وgap وrepeat(auto-fit, minmax(80px, 1fr)). امتداد على العنصر الأول.

.grid-container و.grid-item-N.

مولّد حركة CSS

fade وslide وbounce وscale. المدة والتأخير والتكرار والتخفيف والاتجاه.

انسخ @keyframes و.animated-box.

CSS مباشر

نسخ وإعادة تعيين وتنزيل .css في الوقت الفعلي.

شريط أدوات → Flexbox، بطاقات → Grid، تحميل → Animation.

خاص ومجاني للمطورين

لا رفع إلى الخادم. احفظ كـ css flexbox generator وcss grid generator.

online css playground كامل.

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

هل CSS Playground مجاني؟ نعم. هل يتم رفع CSS الناتج؟ لا، كل شيء محلي. هل يمكن استخدام الناتج في الانتاج؟ نعم بعد تكييف الكلاسات مع مشروعك.

JSON Formatter (/json-formatter)، Image to WebP (/image-to-webp)، Base64 Converter (/base64-converter)، وجميع الادوات (/).