مُحول تدرج CSS أنشئ تدرجات خطية ودوارة ومخروطية جميلة من نوع CSS مع عدة نقاط لونية وسيطرة على الزاوية.
مُحول تدرج CSS
أنشئ تدرجات خطية ودوارة ومخروطية جميلة من نوع CSS مع عدة نقاط لونية وسيطرة على الزاوية.
اختر نوع التدرج
حدد تدرج خطي أو شعاعي أو مخروطي من قائمة النوع.
أضف نقاط الألوان
اختر الألوان وعدّل مواضعها على طول التدرج باستخدام أجهزة اختيار الألوان والشريطي.
انسخ CSS
معاينة النتيجة ونسخ رمز CSS المولَّد بنقرة واحدة.
What Is مُحول تدرج CSS?
مُحَوِّل تدرج CSS هو أداة بصرية لإنشاء تدرجات CSS جميلة دون كتابة الشفرة يدوياً. التدرجات هي انتقالات سلسة بين لونين أو أكثر، وتستخدم على نطاق واسع في تصميم الويب الحديث للخلفيات والأزرار والتعليقات التوضيحية والعناصر الزخرفية. تدعم هذه الأداة ثلاثة أنواع من التدرجات: تدرجات خطية تتحرك في خط مستقيم عند أي زاوية، وتدرجات شعاعية تنبعث من نقطة مركزية، وتدرجات مخروطية تحيط بنقطة مركزية. يمكنك إضافة العديد من نقاط اللون، وتعديل مواضعها، وضبط زاوية التدرج بدقة لتحقيق المظهر الذي تريده بالضبط. يولد الأداة شفرة CSS نظيفة متوافرة مع جميع المستعرضات التي يمكنك نسخها ولصقها مباشرة في ورقة الأنماط الخاصة بك. سواء كنت تصمم خلفية قسم البطل، أو تأثير تحويل الزر، أو لمسة واجهة مستخدم خفيفة، فإن هذا المُحَوِّل يعطي لك السيطرة الإبداعية الكاملة على تدرجاتك.
Why Use مُحول تدرج CSS?
-
بناء مرئي يزيل التخمين عند إنشاء تدرجات متعددة معقدة
-
يدعم أنواع تدرج خطية وشعاعية ومخروطية مع تحكم كامل في الزاوية
-
معاينة الوقت الفعلي توضح بالضبط كيف سيبدو التدرج الخاص بك
-
نسخة واحدة من النقرة تولد رمز CSS نظيف وجاهز للإنتاج
Common Use Cases
خلفيات القسم الرئيسي
إنشاء خلفيات تدرجية جذابة للقسم الرئيسي وصفحات الهبوط.
تصميم الأزرار
تصميم أزرار مملوءة بالتدرجات التي تبرز وتجذب التفاعل المستخدم.
ألواح الكروت
إضافة طبقات تدرجية إلى الصور والبطاقات لتحسين قراءة النص.
التحكم في العلامة التجارية
بناء لوحات الألوان التدرجية التي تطابق ألوان علامتك التجارية للتصميم المتسق.
Technical Guide
تُحدد تدرجات CSS باستخدام خاصية الخلفية أو صورة الخلفية. تستخدم التدرجات الخطية دالة linear-gradient() مع اتجاه (زاوية بالدرجات أو كلمات مثل إلى اليمين) يليها نقاط اللون. تتكون كل نقطة لون من قيمة لونية ومركز اختياري بالنسبة المئوية. تستخدم التدرجات الشعاعية radial-gradient() مع شكل (دائرة أو بيضة) وكلمات حجم. تستخدم التدرجات المخروطية conic-gradient() للتحولات اللونية الدوارة. تُنشئ نقاط لون متعددة انتقالات معقدة - يمكنك استخدام نقطتين في نفس الموقع للحصول على حدود ألوان صلبة. لأداء، يتم تقديم تدرجات CSS بواسطة المستعرض ولا تتطلب تنزيل الصور. هي مستقلة عن الدقة وتظهر حادة على أي كثافة للشاشة. استخدم بادئة -webkit- لدعم المتصفحات القديمة، على الرغم من أن المتصفحات الحديثة تدعم التدرجات دون بادئات. يمكن تطبيق التدرجات باستخدام قيم خلفية متعددة مفصولة بفواصل، مما يتيح تأثيرات بصرية معقدة. خاصية background-size تتحكم في حجم كل طبقة من التدرج عند إنشاء أنماط متكررة.
Tips & Best Practices
-
1استخدم على الأقل 3 نقاط ألوان للحصول على تدرجات أكثر إثارة والطبيعية
-
2اضبط الزاوية إلى 135° لموجه التدرج الشعبي القطري
-
3طبقات متعددة من التدرجات لأffects الخلفية المعقدة
-
4استخدم شفافًا كنقطة لون لإنشاء تأثيرات تلاشي
Related Tools
مُولِد ظل CSS
أنشئ ظلال CSS متعددة الطبقات مع خيارات الإدراج وتحديثات في الوقت الفعلي.
🎨 CSS & Design
مُحسّن زجاجيّة مشعّشة
انشئ تأثيرات واجهة مستخدم زجاجية مشعّشة مع ضبط خلفية متعمّمة، شفافية، وتشبع.
🎨 CSS & Design
نص CSS التدرجي
انشئ نصًا مع ملء تدرجي باستخدام CSS background-clip و text-fill-color.
🎨 CSS & Design
نمط خلفية سي اس اس
إنشاء أنماط خلفية متكررة في سي اس اس بما في ذلك الشرائط والشطرنج والنقاط والمزيد.
🎨 CSS & DesignFrequently Asked Questions
Q ما هي أنواع تدرج CSS المدعومة?
Q هل يمكنني استخدام عدة نقاط ألوان?
Q هل التدرجات المولَّدة متوافقة مع المتصفحات المتعددة?
Q هل يمكنني إنشاء تدرجات متكررة?
Q كيف يمكنني إنشاء تدرج بزاوية محددة?
About This Tool
مُحول تدرج CSS 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.