التصميم وCSS
مولّد CSS: تدرّجات وظلال وزجاج ومنحنيات حركة وأشكال عضوية
أنشئ بصريًا تدرّجات CSS وظلالًا متعددة الطبقات وبطاقات زجاجية ومنحنيات cubic-bezier وأشكال SVG عضوية.
أنشئ تدرّجات خطية أو شعاعية أو مخروطية بأي عدد من نقاط الألوان.
background: #0f766e; background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);
قوالب جاهزة
ما هذه الأداة؟
خمسة مولّدات تصميم في مكان واحد. أنشئ تدرّجات خطية وشعاعية ومخروطية، وكدّس ظلالًا ناعمة أو حادة، وصمّم بطاقات زجاج مصنفر، واسحب منحنى cubic-bezier وشاهده يتحرك، أو أنشئ أشكال SVG عضوية. كل تعديل يحدّث المعاينة وكود CSS فورًا.
تدعم التدرّجات أي عدد من نقاط الألوان والأنماط المتكررة، وتتضمن لونًا احتياطيًا ثابتًا. ويمكن أن تحتوي الظلال على ست طبقات — والجمع بين ظل صغير حاد وآخر كبير ناعم هو سر العمق الواقعي.
يستخدم تأثير الزجاج الخاصية backdrop-filter لتمويه ما خلف بطاقة شبه شفافة، ويعمل في كل المتصفحات الحديثة. ويُخرج محرر الحركة دالة cubic-bezier()، وقيم Y خارج 0–1 تُحدث ارتدادًا. أما الأشكال العضوية فمسارات مغلقة ناعمة تُستخدم كـ SVG أو clip-path في CSS.
كيفية استخدام مولّد CSS
- اختر مولّدًا: تدرّج أو ظل الصندوق أو تأثير الزجاج أو منحنى بيزييه أو شكل SVG عضوي.
- اضبط المنزلقات والألوان، أو ابدأ بقالب جاهز.
- تتحدّث المعاينة مباشرة مع كل تعديل.
- انسخ كود CSS الناتج (أو نزّل ملف SVG) والصقه في مشروعك.
أمثلة
ظل متعدد الطبقات
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
0px 4px 8px 0px rgba(0, 0, 0, 0.08),
0px 12px 24px -4px rgba(0, 0, 0, 0.12);الأسئلة الشائعة
هل يمكنني الربط مباشرة بمولّد معيّن؟
نعم. أضف ?mode=gradient أو ?mode=shadow أو ?mode=glass أو ?mode=easing أو ?mode=blob إلى عنوان الصفحة ليُفتح ذلك التبويب مباشرة.
هل يعمل تأثير الزجاج في كل المتصفحات؟
تعمل الخاصية backdrop-filter في الإصدارات الحالية من Chrome وEdge وFirefox وSafari، ويتضمن الكود البادئة -webkit- لإصدارات Safari الأقدم.
ما هي دالة التوقيت cubic-bezier؟
تتحكم في كيفية تسارع الحركة وتباطئها. الأرقام الأربعة هي إحداثيات X وY لنقطتي تحكم؛ فمثلًا ease-in-out تساوي cubic-bezier(0.42, 0, 0.58, 1).
هل يمكنني استخدام الأشكال العضوية تجاريًا؟
نعم. يُنشأ كل شكل على جهازك وهو ملكك لتستخدمه أينما شئت دون ذكر المصدر.
هل تحتاج إلى مزايا أكثر لاحقًا؟
الأدوات المميزة والحدود الأعلى والوصول عبر واجهة برمجية ضمن خططنا القادمة. يبقى الإصدار الأول مجانيًا وخاصًا داخل متصفحك.