الرئيسية
أدوات الألوان
مُحول تدرج مخروطي

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

🎨

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

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

تحديد الألوان

اختر ثلاثة ألوان للشكل المخروطي المتدرج.

تعديل الإعدادات

حدد زاوية البداية وموقع المركز.

نسخ CSS

انسخ رمز CSS المتدرج المخروطي الذي تم إنشاؤه.

Loading tool...

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

مُحَرِّر تدرج مخروطي يخلق تدرجات CSS تتحرك حول نقطة مركزية، وتنتقل بين الألوان بزاوية بدلاً من الخطية أو الإشعاعية. التدرجات المخروطية تدور حول نقطة مركزية، مما يجعلها مثالية لإنشاء عجلات الألوان وقطاعات تشبه مخططات القيعان وساعات وأFFECTS ملونة متحركة. يسمح لك هذا الأداة باختيار ثلاثة ألوان، وضبط زاوية البداية، ووضع نقطة المركز. الرمز الناتج عن CSS conic-gradient () يخلق انتقالات زاويّة سلسة تنتهي باللون الأول. التدرجات المخروطية هي ميزة قوية في CSS تمكن من تأثيرات بصرية كانت ستتطلب SVG أو Canvas، مما يحافظ على تصاميمك نقية ومتسارعة بواسطة GPU.

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

إنشاء انتقالات لونية زاويّة متدرجة غير ممكنة مع التدرجات الخطية أو الشعاعية
زاوية بداية قابلة للتعديل لتحكم الدوران
موقع مركز مخصص لأffects غير مركزية
مثالي للخلفيات الزخرفية وتصور البيانات
إخراج CSS نظيف للاستخدام الإنتاجي

Common Use Cases

عجلات الألوان

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

مخططات القيعان

بناء مخططات قيعان بسيطة فقط مع CSS ذات توقفات لونية صعبة.

خلفيات زخرفية

إنشاء خلفيات متدرجة زاويّة فريدة من نوعها لأقسام والبطاقات.

دوارات التحميل

تصميم دوارات تحميل فقط مع CSS باستخدام أقواس التدرج المخروطي.

Technical Guide

CSS conic-gradient () يخلق انتقالات الألوان حول نقطة مركزية. بناء الجملة هو: conic-gradient(from angle at posX posY, color1, color2, ..., color1). زاوية "from" تُدير موقع البداية (الافتراضي 0deg = أعلى). يتم توزيع الألوان بالتساوي حول الدورة 360 ° إلا إذا تم تحديد محطات زوايا صريحة. تكرار اللون الأول كأخر توقف يخلق حلقة متصلة. لأFFECTS مخطط القيعان، استخدم محطات النسبة المئوية: conic-gradient(red 0% 25%, blue 25% 50%, green 50% 75%, yellow 75%). التدرجات المخروطية مدعومة في Chrome 69+ و Firefox 83+ و Safari 12.1+ و Edge 79+. يمكن دمجها مع mask-image لتشكيلات معقدة باستخدام border-radius: 50%.

Tips & Best Practices

1
كرر اللون الأول كآخر توقف لتحقيق انتقالات دائرية متصلة
2
استخدم توقفات صعبة (نسبة مئوية相同، لونان) لأجزاء مخطط القيعان
3
دمج مع border-radius: 50% لأffects عجلة ألوان دائرية
4
زاوية "من" تدور التدرج كله - مفيد للآثار المتحركة
5
طبقات متعددة من التدرجات المخروطية لأنماط معقدة

Related Tools

محدد اللون

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

🎨 Color Tools

عجلة التآلف اللوني

عجلة ألوان تفاعلية مع خمسة أنواع من التآلف والتحديد المرئي.

🎨 Color Tools

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

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

🎨 Color Tools

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

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

🎨 Color Tools

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

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

🎨 CSS & Design

Frequently Asked Questions

Q ما هو التدرج المخروطي؟

التدرج المخروطي ينتقل بين الألوان حول نقطة مركزية، متدرج زاويا مثل يد الساعة. يختلف عن التدرجات الخطية (خط مستقيم) والتدرجات الشعاعية (الخارجة من المركز).

Q هل يمكنني إنشاء مخططات قيعان باستخدام التدرجات المخروطية؟

نعم! استخدم توقفات لونية صعبة (لونان بنسبة مئوية相同) لإنشاء أجزاء حادة. على سبيل المثال: conic-gradient(red 0% 30%, blue 30% 70%, green 70%).

Q هل التدرج المخروطي مدعوم جيدا؟

يدعمه جميع المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge. إنه ميزة من مستوى الصور CSS 4 مع تبني واسع منذ عام 2020.

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.