صمّم تأثيرات CSS بصريًا وانسخ الكود

استوديو CSS المرئي يلغي التخمين في قيم التأثيرات. اسحب المنزلقات وشاهد النتيجة، ثم انسخ كود CSS الناتج: تدرجات خطية وشعاعية، ظلال متعددة الطبقات، تشويش خلفية زجاجي، حدود دائرية، وتحويلات ثلاثية الأبعاد مع منحنيات حركة مخصصة.

يضم هذا الاستوديو 2 مساحات عمل تغطي المهام المتقاربة، ويمكنك التنقل بينها دون مغادرة الصفحة أو إعادة رفع مدخلاتك في كل مرة.

1. 1

   التدرجات والظلال والزجاج ونصف القطر

   بناء تدرجات وظلال متعددة الطبقات وتأثيرات زجاجية وحدود دائرية مع معاينة مباشرة.

2. 2

   تحويلات ثلاثية الأبعاد وlinear() وclip-path

   تجربة التحويلات ثلاثية الأبعاد ومنحنيات الحركة linear() وأشكال clip-path.

1. 1

   اختر مساحة العمل المناسبة

   افتح استوديو CSS المرئي واختر من 2 مساحات عمل الوضع الذي يطابق مهمتك: التدرجات والظلال والزجاج ونصف القطر أو تحويلات ثلاثية الأبعاد وlinear() وclip-path.

2. 2

   أضف قيم الألوان والأبعاد والزوايا

   أدخل قيم الألوان والأبعاد والزوايا مباشرة في الصفحة، ثم ضبط المنزلقات وترتيب الطبقات. لا حاجة لإنشاء حساب أو رفع الملفات إلى خادم.

3. 3

   راجع النتيجة وصدّرها

   راجع كود CSS جاهز للنسخ في المعاينة، ثم انسخه أو نزّله. إذا لم تكن النتيجة كما توقعت، عدّل الإعدادات وأعد المحاولة.

بعض التأثيرات مثل backdrop-filter وقص clip-path المعقد تختلف في الأداء بين المتصفحات؛ اختبرها على الأجهزة المستهدفة وفكر في تقليلها على الهاتف.

تعتمد النتائج على دعم متصفحك لواجهات الويب مثل Canvas وWeb Audio وWeb Crypto وWebAssembly. قد تكون الملفات الكبيرة جدًا بطيئة أو تتجاوز حدود ذاكرة المتصفح. ولا يمكن لأي أداة في هذا الموقع ضمان نسبة ضغط محددة، أو استعادة الملفات التالفة، أو دعم كل تفريعات صيغة ملف معيّنة.

تسميات الضوابط الظاهرة هنا هي واجهة المنتج الأصلية. نُبقي الأسماء التقنية (JSON وPDF وSVG وWebP وJWT…) بصيغتها المعيارية عن قصد.