أدوات CSS وتصميم مجانية
ابنِ CSS بصريًا مع معاينات فورية. لوحات لونية، وتدرّجات، وظلال، وأنصاف أقطار الحدود، وتخطيطات flexbox، ومنحنيات تسارع، وأحجام متجاوبة: انسخ الـ CSS عندما يبدو جيدًا.
8 أدوات في هذه الفئة · مجانية 100% · بدون تسجيل
جميع التصميم وCSS
محوّل الألوان (HEX/RGB/HSL)
حوّل الألوان بين صيغ HEX و RGB و HSL. اختر لونًا بصريًا أو أدخل القيم يدويًا.
فتح →مولّد box-shadow في CSS
أنشئ قيم box-shadow في CSS بصريًا. عاين في الوقت الفعلي وانسخ الـ CSS المولَّد.
فتح →مولّد التدرّجات اللونية في CSS
أنشئ تدرّجات CSS خطية وشعاعية. اختر الألوان بصريًا وانسخ كود CSS الناتج.
فتح →مولّد منحنيات التسارع cubic-bezier
أنشئ منحنيات تسارع (easing) بصيغة cubic-bezier لـ CSS. يتضمن إعدادات مسبقة قياسية.
فتح →مولّد لوحات الألوان
أنشئ لوحات ألوان متناغمة انطلاقًا من أي لون أساسي. يدعم الأنظمة المكمّلة والمتشابهة والثلاثية والأحادية اللون.
فتح →مولّد border-radius في CSS
أنشئ قيم border-radius معقّدة في CSS بصريًا. تحكّم مستقل في كل زاوية.
فتح →مولّد CSS Clamp()
أنشئ قيم CSS مرنة ومتجاوبة باستخدام clamp(). تتدرّج بسلاسة بين الحدين الأدنى والأقصى عبر نطاقات إطار العرض (viewport).
فتح →مولّد Flexbox في CSS
أنشئ تخطيطات CSS بـ flexbox بصريًا. شاهد النتيجة في الوقت الفعلي وأنت تضبط الاتجاه والمحاذاة والالتفاف والتباعد.
فتح →لماذا تسرّع مولّدات CSS البصرية عمل التصميم
يمنحك CSS الحديث تحكمًا كاملًا، لكن صياغة box-shadow ومحطات التدرّج وتسارع cubic-bezier مؤلمة لكتابتها يدويًا. تتيح لك المولّدات البصرية سحب المنزلقات، ورؤية النتيجة تتحدّث فوريًا، ثم نسخ الـ CSS بدقة. إنها لا تغني عن معرفة CSS، لكنها تزيل احتكاك التكرار على القيم. استخدمها للنماذج الأولية ثم انقل الناتج إلى كودك.
ميزات CSS الحديثة التي تستحق التعلّم في 2025
clamp() للطباعة المرنة (لا مزيد من استعلامات الوسائط لكل نقطة توقف لأحجام الخطوط). aspect-ratio لحاويات الفيديو والصور المتجاوبة. grid للتخطيطات ثنائية الأبعاد (استخدم flexbox للأحادية). subgrid للشبكات المتداخلة التي تحاذي أصلها. المُحدِّد :has() للتنسيق المبني على العنصر الأصل. color-mix() لمزج الألوان وقت التشغيل. كلها متاحة في أي متصفح حديث. ينتج مولّد CSS Clamp في هذه الصفحة تعبيرات clamp() مُكوَّنة بشكل صحيح من قيم الحد الأدنى/الأقصى لديك.
نظرية الألوان لغير المصممين
اللوحات أحادية اللون (درجة لون واحدة، إضاءة مختلفة) هي الخيار الاحترافي الأكثر أمانًا. والمتجانسة (درجات لون متجاورة) تنقل الوحدة والهدوء. والمتكاملة تخلق تباينًا، مثالية لدعوات اتخاذ الإجراء. والثلاثية نابضة بالحياة لكن يصعب موازنتها. يحسب مولّد اللوحات اللونية جميعها من أي لون أساسي تختاره. وللوصولية، تحقّق أيضًا من نسب التباين: تتطلب WCAG AA نسبة 4.5:1 لنص المتن و3:1 للنص الكبير.