مولّد CSS
- الملفات لا تغادر جهازك
- يعمل في المتصفح
- مجاني، بلا حساب، بلا علامة مائية
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]كيفية استخدام مولّد CSS
ولّد CSS بصريًا مع معاينة حية: ظل الصندوق، ومسار القص، وتسهيل بيزيه التكعيبي، وتأثير الزجاج، ونصف قطر حد الشكل العضوي، وظل النص. يعطي كل مولّد CSS عاديًا وصنف قيمة اعتباطية في Tailwind، جاهزين للنسخ.
- 1
اختر مولّدًا: ظل الصندوق، أو مسار القص، أو بيزيه التكعيبي، أو تأثير الزجاج، أو نصف قطر الشكل، أو ظل النص.
- 2
ابدأ من إعداد مسبق، أو اضبط المنزلقات والألوان.
- 3
اسحب مباشرة على المعاينة حيث يُتاح: نقاط clip-path، أو مقبضا بيزيه، أو مقابض الشكل.
- 4
انسخ CSS أو صنف Tailwind من الإخراج أدناه.
أسئلة شائعة
هل يمكنني تكديس عدة ظلال؟
نعم. في «ظل الصندوق»، انقر «إضافة طبقة» لدمج الطبقات، لكل منها إزاحتها وتمويهها وانتشارها ولونها وشفافيتها وكونها داخلية.
كيف أضيف نقاطًا إلى مسار القص أو أزيلها؟
انقر مزدوجًا على حافة الشكل لإضافة نقطة؛ وحدّد نقطة واضغط Delete لإزالتها. تستخدم أشكال الدائرة والقطع الناقص والداخل المنزلقات بدل ذلك.
لماذا لا أرى تأثير الزجاج؟
يموّه backdrop-filter ما خلف العنصر فقط، فيحتاج إلى خلفية ملونة أو مزدحمة. يتضمن الإخراج البادئة -webkit- لـ Safari.
ماذا تفعل قيم بيزيه خارج 0–1؟
تجعل قيم Y فوق 1 أو دون 0 الحركة تتجاوز الهدف، فيعطي ذلك أثر ارتداد أو استباق. اضغط «تشغيل» لمقارنتها بالحركة الخطية.
هل يحتاج إخراج Tailwind إلى إضافة؟
لا. يستخدم صياغة القيمة الاعتباطية في Tailwind، مثل rounded-[…] أو [clip-path:…]، وهي تعمل في Tailwind القياسي.