الرئيسية
أدوات الألوان
مُحَرِّر تدرج شعاعي

مُحَرِّر تدرج شعاعي في CSS أنشئ تدرجات شعاعية في CSS مع شكل ومركز ولون مخصصين.

🎨

مُحَرِّر تدرج شعاعي

أنشئ تدرجات شعاعية في CSS مع شكل ومركز ولون مخصصين.

اختر الألوان

حدد لون المركز ولون الحافة للتفاوت التدرجي.

تكوين الشكل

حدد شكل الدائرة أو الشكل البيضوي واضبط موقع المركز.

نسخ كود CSS

انسخ الكود الناتج من CSS لمشروعك.

Loading tool...

What Is مُحَرِّر تدرج شعاعي?

مُحَرِّر تدرج شعاعي يخلق تدرجات CSS الشعاعية التي تتحرك προς الخارج من نقطة مركزية في نمط دائري أو بيضوي. على عكس التدرجات الخطية التي تنتقل على طول خط مستقيم، فإن التدرجات الشعاعية تخلق تأثيرات مثل مصباح يدور، وكرات متوهجة، وتأثيرات عمق شائعة الاستخدام في تصميم الويب الحديث. يمكنك التحكم في شكل التدرج (دائرة أو بيضة)، وموقع المركز، والألوان. يتولى المحرر إنتاج رمز CSS radial-gradient () الذي يعمل على جميع متصفحات الويب الحديثة. تكون التدرجات الشعاعية فعالة بشكل خاص لإنشاء عمق بصرية، وتأثيرات الإضاءة في الأقسام الرئيسية، والخلفيات الزخرفية، والتأثيرات الإضاءة الدقيقة التي تجعل التصاميم المسطحة تبدو أكثر بعدًا.

Why Use مُحَرِّر تدرج شعاعي?

خيارات أشكال دائرية ومستطيلة لأffects مختلفة
موقع مركزي قابل للتعديل مع مشغلات X / Y
تحديث المعاينة المباشرة عند تغيير الإعدادات
إخراج CSS نظيف وجاهز للإنتاج
مجاني للاستخدام دون تسجيل الدخول

Common Use Cases

أffects الإضاءة

إنشاء أeffects جذب الانتباه على القسم الرئيسي أو الصور المنتج.

أffects التألق

توليد خلفيات كروية متألقة للبطاقات أو النوافذ المنبثقة أو العناصر الزخرفية.

العمق والأبعاد

إضافة عمق مرئي إلى التصاميم المسطحة مع انتقالات لونية شعاعية خفيفة.

أffects الفيجنت

إنشاء فيجنتات حافة داكنة على الصور للحصول على مظهر سينمائي.

Technical Guide

يُنشئ CSS radial-gradient () تدرجًا ينتشر من نقطة. الصياغة هي: radial-gradient (شكل في موقع، لون1، لون2). يمكن أن يكون الشكل "دائرة" (نصف قطر متساوٍ في جميع الاتجاهات) أو "بيضة" (نصف القطر مطابق للنسبة الجانبية للعنصر). يستخدم الموقع قيم النسبة المئوية (50٪ 50٪ هو المركز). تتحكم كلمات حجم مثل closest-side و farthest-corner في مدى امتداد التدرج. تعمل نقاط اللون بنفس الطريقة كما في التدرجات الخطية. يقوم المتصفح بتعديل الألوان من المركز إلى الخارج في دوائر أو بيضوات متحدة المركز. تكون التدرجات الشعاعية قابلة للتركيب - يمكنك تحويل تدرجات شعاعية متعددة باستخدام فصل الفواصل في background-image لأffects معقدة مثل مصادر الضوء المتعددة.

Tips & Best Practices

1
استخدم "دائرة" للحصول على تدرجات دائرية مثالية و "بيضوي" لأشكال متوافقة مع نسبة العرض إلى الارتفاع
2
ضع المركز في موقع غير مركزي (على سبيل المثال ، 30٪ 30٪) لتحقيق أffects إضاءة غير متماثلة
3
طبقات متعددة من التدرجات الشعاعية للحصول على أeffects متعدد المصادر الخفيفة المعقدة
4
استخدم شفافًا كونها لون حافة للتحقق من تأثيرات التلاشي الخفية فوق الخلفيات
5
دمج مع وضع مزج الخلفية الإبداعي لتأثيرات التلوين الإبداعية

Related Tools

محدد اللون

محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.

🎨 Color Tools

مُحَرِّر تدرج خطي

أنشئ تدرجات خطية CSS مع ألوان مخصصة وزاوية ووقف الألوان.

🎨 Color Tools

مُحول تدرج مخروطي

أنشئ تدرجات مخروطية CSS لرسوم البيان الدائري وتدرجات الألوان والآثار المتحركة.

🎨 Color Tools

مخلوط الألوان

اخلط لونين معًا بنسبة قابلة للتعديل وشاهد التدرج الكامل.

🎨 Color Tools

مُحول تأثيرات الفلتر في CSS

تطبيق تأثيرات فلتر CSS مثل التعتيم، سطوع، تباين، وغيرها مع عناصر تحكم بصرية.

🎨 CSS & Design

Frequently Asked Questions

Q ما الفرق بين الدائرة والشكل البيضوي؟

تخلق الدائرة تدرجًا دائريًا مثاليًا بغض النظر عن أبعاد العنصر. يمتد الشكل البيضوي ليتوافق مع نسبة العرض إلى الارتفاع للعنصر ، مما يخلق شكل بيضاوي في العناصر غير المربعة.

Q هل يمكنني وضع المركز في أي مكان؟

نعم، باستخدام مشغلات موقع X و Y (0-100٪). الإعداد الافتراضي هو 50٪ 50٪ (المركز). يتحرك لإنشاء أffects إضاءة غير متماثلة.

Q هل يدعم جميع المتصفحات التدرج الشعاعي؟

نعم ، لدعم radial-gradient () في جميع المتصفحات الحديثة دون بادئات البائع.

About This Tool

مُحَرِّر تدرج شعاعي is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.