تخطَّ إلى المحتوى الرئيسي
عُدّتك

أدوات التصميم وCSS

أدوات لتوليد تدرجات الألوان والظلال ونصف الأقطار وفحص تباين الألوان لتصميم الويب. يضم هذا التصنيف 17 أداة من عُدّتك، تعمل مباشرة داخل متصفحك دون الحاجة لتثبيت أي برنامج.

محلي بالكامل

فحص تباين الألوان (WCAG)

تحقق من نسبة التباين بين لونين حسب معايير إمكانية الوصول WCAG

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

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

صمّم تدرج ألوان خطي أو دائري واحصل على كود CSS جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد ظلال CSS (Box Shadow)

صمّم ظل عنصر بصريًا واحصل على كود box-shadow جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد استدارة الحواف (Border Radius)

اضبط استدارة زوايا العنصر بصريًا واحصل على كود border-radius

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

محوّل px إلى rem وem

حوّل بين وحدات px وrem وem مع إمكانية ضبط حجم الخط الأساسي

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

استخراج لوحة الألوان من الصور

استخرج أبرز الألوان المهيمنة في أي صورة بصيغ HEX وRGB وCSS

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

إنشاء صورة أنيقة للكود البرمجي

الصق كودًا وحوّله إلى صورة أنيقة بخلفية متدرجة ونافذة عنوان، جاهزة للمشاركة

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

محاكي عمى الألوان

شاهد كيف تبدو صورتك لشخص مصاب بعمى الألوان (بروتانوبيا، ديوترانوبيا، تريتانوبيا، أو أكروماتوبسيا)

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد clip-path لـ CSS

اختر شكلًا جاهزًا (دائرة، مثلث، نجمة، فقاعة رسالة...) واحصل على كود clip-path جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد منحنى Cubic Bezier للحركة

اسحب نقطتين لتصميم منحنى تسارع الحركة (Easing) بصريًا واحصل على كود cubic-bezier

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

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

صمّم بطاقة بتأثير الزجاج المصنفر بصريًا واحصل على كود CSS جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد تخطيطات CSS Grid وFlexbox

صمّم تخطيط Grid أو Flexbox بصريًا مع معاينة حية واحصل على كود CSS جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

تحويل النص إلى خط يد

حوّل نصك المكتوب إلى صورة تبدو مكتوبة بخط اليد على ورقة مسطّرة، بعدة أنماط خطوط

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد الأشكال العضوية وأنماط الخلفيات (SVG)

ولّد شكلًا عضويًا (Blob) عشوائيًا أو نمط خلفية متكرر بصيغة SVG، وانسخه أو نزّله

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد حركات CSS (Keyframe Animation)

صمّم حركة CSS بصريًا (ظهور، انزلاق، تكبير، ارتداد، دوران، قلب) واحصل على كود @keyframes جاهز

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد لوحات الألوان المتناغمة

اختر لونًا أساسيًا واحصل على لوحة ألوان متناغمة (متكامل، متجاور، ثلاثي، رباعي، أحادي اللون)

أدوات التصميم وCSSافتح الأداة
محلي بالكامل

مولّد تدرجات الشبكة اللونية

أنشئ خلفية تدرجات لونية ناعمة متعددة النقاط (Mesh Gradient) بضغطة زر، وانسخ كود CSS جاهزًا

أدوات التصميم وCSSافتح الأداة

تصنيفات أخرى قد تهمّك

أدوات الذكاء الاصطناعيأدوات النصوصأدوات PDFأدوات الصور
عرض كل الأدوات والتصنيفات