مولد ظل CSS

ما هو مولد ظل CSS؟

مولد ظل CSS هو أداة مجانية شاملة عبر الإنترنت تساعدك في إنشاء تأثيرات box-shadow و text-shadow لعناصر الويب من خلال تعديلات بصرية. لا حاجة لكتابة كود — فقط حرك المنزلقات وعدّل اللوحات في الوقت الفعلي، ثم انسخ كود CSS الجاهز للاستخدام بنقرة واحدة.

الميزات الرئيسية

• 7 معاملات أساسية — إزاحة X/Y (من -100 إلى 100 بكسل)، نصف قطر الضبابية (0-100 بكسل)، نصف قطر الانتشار (من -50 إلى 50 بكسل)، لون الظل، الشفافية (0-100%)، مفتاح الظل الداخلي
• 8 قوالب جاهزة — بطاقة عائمة، ظل ناعم (Neumorphism)، ظل ناعم، توهج داخلي، ظل صلب، طبقتان، ملون، زر مضغوط
• 12 نمط تصميم — عائم، بارز، غائر، ناعم، حاد، توهج، نيون، نقش بارز، ثنائي، ظل طويل، ناعم داخلي، شفق
• طبقات ظل متعددة — حتى 5 طبقات، كل طبقة قابلة للتعديل بشكل مستقل، مع إعادة ترتيب بالسحب والإفلات
• وضع ألوان HSL — يدعم تعديل الألوان بنظامي Hex و HSL مع مزامنة ثنائية الاتجاه
• ظل ناعم بنقرة واحدة — أدخل لوناً أساسياً وسيتم حساب قيم الظل الفاتح والداكن تلقائياً
• مولد المستويات — يُنشئ تلقائياً مجموعات كود ظل منخفض/متوسط/مرتفع من المعاملات الحالية
• معاينة تحريك التمرير — يحاكي تأثير انتقال الظل عند تمرير المؤشر
• أنماط إخراج متعددة — يدعم بادئة WebKit وإخراج متغيرات CSS والتبديل بين وضعي box-shadow و text-shadow
• تصدير لقطة شاشة — تصدير المعاينة كصورة PNG

طريقة الاستخدام

• ضبط المعاملات — استخدم المنزلقات أو حقول الأرقام لتعديل كل معامل ظل؛ يتم تحديث المعاينة في الوقت الفعلي
• اختيار قالب أو نمط — اختر من القائمة المنسدلة للقوالب أو انقر على علامة نمط لتطبيق تركيبات الظل الشائعة فوراً
• إدارة طبقات الظل المتعددة — انقر على "إضافة طبقة" لإضافة المزيد من الطبقات، اسحب لإعادة الترتيب، واحذف الطبقات الفردية حسب الحاجة
• نسخ الكود — انقر على زر "نسخ CSS" في شريط الأدوات أو زر النسخ بجانب منطقة الكود
• حفظ ومشاركة — يتم حفظ المعاملات تلقائياً في التخزين المحلي للمتصفح، أو شارك إعداداتك عبر رابط URL Hash

الخصوصية

جميع المعالجة تتم بالكامل في متصفحك. لا يتم رفع أي بيانات إلى أي خادم. يمكنك استخدام الأداة براحة بال تامة.