مُنشئ التدرجات
مُنشئ تدرجات CSS مجاني عبر الإنترنت. أنشئ تدرجات خطية، تدرجات دائرية، وتدرجات مخروطية مع معاينة مباشرة. نسخ كود CSS فورًا.
إنشاء تدرجات CSS جميلة بصريًا — خطية، دائرية، ومخروطية مع تخصيص كامل.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);مولد تدرج CSS المجاني — إنشاء تدرجات خطيّة، كرويّة، ودائرية
أنشئ تدرجات CSS جميلة باستخدام هذا المولد المجاني للتدرجات عبر الإنترنت. اختر بين أنواع التدرجات الخطية، الكرويّة، والدائرية، وقم بتخصيص الألوان والزوايا، ونسخ كود CSS فورًا.
ما هو تدرج CSS؟
تدرج CSS هو انتقال سلس بين لونين أو أكثر، ويتم إنشاؤه باستخدام خاصية background في CSS. يزيل التدرجات الحاجة إلى ملفات الصور، مما يقلل من وقت تحميل الصفحة ويسمح بإنشاء خلفيات قابلة للتكيف تمامًا ومستقلة عن الدقة.
هناك ثلاثة أنواع رئيسية من تدرجات CSS:
- التدرجات الخطية تنتقل الألوان على طول خط مستقيم، ويتم تعريفها بواسطة زاوية أو اتجاه.
- التدرجات الكرويّة تشع من نقطة مركزية، مما يخلق أنماطًا دائرية أو بيضاوية.
- التدرجات الدائرية تنتقل الألوان حول نقطة مركزية في مسح دوار، مشابهًا لعجلة الألوان.
كيفية استخدام هذا مولد التدرجات
- اختر نوع التدرج — اختر بين الخطي، الكروي، والدائرية من قسم التحكم في الأعلى.
- حدد الاتجاه — بالنسبة للتدرجات الخطية والدائرية، قم بتعديل الزاوية باستخدام المفتاح أو أزرار الاختيار السريع.
- تخصيص خيارات التدرج الكروي — بالنسبة للتدرجات الكرويّة، اختر شكلًا (دائرة أو بيضوي) ووحدة حجم.
- تحرير نقاط اللون — انقر على مُختار الألوان لتغيير لون كل نقطة. اسحب مفتاح الوضعية لتغيير مكان ظهور كل لون.
- إضافة أو حذف الألوان — استخدم زر "إضافة لون" لإضافة نقاط لون إضافية (حتى 8)، أو انقر على X لحذف نقطة (الحد الأدنى 2).
- جرب إعدادات مسبقة — انقر على أي عينة من مساحة الألوان لتحميل تدرج معد مسبقًا.
- نسخ كود CSS — انقر على "نسخ CSS" لنسخ خاصية
backgroundالكاملة إلى الحافظة.
المزايا الرئيسية
| الميزة | الفائدة |
|---|---|
| ثلاثة أنواع من التدرجات | تدرجات خطيّة، كرويّة، ودائرية — جميع أنماط تدرج CSS مدعومة |
| معاينة مباشرة | رؤية تدرجك يتم تحديثه فورًا أثناء تعديل الإعدادات |
| حتى 8 نقاط لون | إنشاء تدرجات متعددة الألوان مع تحديد دقيق للوضعية |
| تحكم في الزاوية | مفتاح + أزرار اختيار سريع للزوايا الشائعة (0°–315°) |
| شكل وحجم كروي | أشكال دائريّة أو بيضاوية مع أربع وحدات حجم CSS |
| إعدادات مسبقة بضغطة واحدة | ستة تدرجات معدة مسبقًا لبدء العمل بسرعة |
| نسخ كود CSS | نقرة واحدة لنسخ كود CSS الجاهز للإنتاج إلى الحافظة |
| لا يتم إرسال بيانات | كل شيء يعمل في متصفحك — لا خادم، لا تتبع |
مقارنة أنواع التدرجات
| الخاصية | الخطي | الكروي | الدائري |
|---|---|---|---|
| الاتجاه | زاوية (0–360°) | شكل + وحدة حجم | زاوية البداية |
| النمط | خط مستقيم | دائرة أو بيضوية من نقطة مركزية | مسح دوار |
| الأفضل لـ | الخلفيات، الشعارات، الأزرار | الأضواء، الكرات، الفن المجرد | الرسوم الدائرية، عجلات الألوان، الساعات |
| دالة CSS | linear-gradient() |
radial-gradient() |
conic-gradient() |
استخدامات واقعية
خلفيات المواقع
استبدل الألوان المسطحة بتدرجات خفيفة لإنشاء صفحات حديثة ومهنية. تدرج خطي بزاوية 135° مع لونين قريبين يضيف عمقًا دون إلهاء.
الأزرار والدعوات للعمل
اجعل الأزرار الدعوة للعمل تبرز بتوهجات لونية حيوية. استخدم تدرجًا بزاوية 180° (من الأعلى إلى الأسفل) لتأثير طبيعي من الضوء إلى الظلام.
أقسام البانرات
أنشئ بانرات جذابة بتوهجات متعددة الألوان. ادمج ثلاثة ألوان أو أكثر لتصميم مميز لعلامتك التجارية.
العناوين والبطاقات
قم بتطبيق تدرجات شفافة على الصور للتأكد من قابلية قراءة النص مع الحفاظ على الاهتمام البصري.
التصورات البيانات
استخدم تدرجات دائرية لإنشاء رسومات بسيطة مثل مخططات الدوائر، حلقات التقدم، أو عجلات الألوان دون الحاجة إلى JavaScript أو SVG.
نصائح لتحسين التدرجات
- حد من الألوان إلى 2–3 ألوان لتصميمات نظيفة ومهنية. يمكن أن تعمل نقاط أكثر ولكنها تتطلب تعديلًا دقيقًا.
- استخدم ألوانًا متشابهة للحصول على تدرجات خفيفة (مثلاً: الأزرق الفاتح إلى الأزرق الداكن) وألوانًا مكملة للحصول على تدرجات جريئة.
- اعمل زاوية مطابقة للتصميم — 180° مناسبة لقسمات عمودية، 90° للشريط الأفقي.
- جربها على الخلفيات الداكنة والفاتحة — تدرج يبدو رائعة على خلفية بيضاء قد يحتاج تعديلًا في الوضعية الداكنة.
- استخدم
background-sizeوbackground-repeatلتكرار التدرجات الصغيرة في أنماط. - دمجها مع الشفافية — استخدم قيم
rgba()أوhsla()مع قنوات ألفا لصنع تدرجات تدمج مع المحتوى الخلفي.
فهم تركيب تدرج CSS
تدرج خطي أساسي:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
تدرج كروي مع شكل وحجم:
background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);
تدرج دائرية:
background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);
يدعم جميع المتصفحات الحديثة هذه أنواع التدرجات دون الحاجة إلى مُعدّلات متصفح.
الأسئلة الشائعة
كم عدد الألوان التي يمكن استخدامها في تدرج CSS؟
يدعم CSS أي عدد من نقاط اللون. هذا الأداة تسمح باستخدام حتى 8 لاستخدام عملي. في المشاريع الفعلية، تكون 2–4 نقاط أكثر شيوعًا.
ما الفرق بين التدرجات الخطية والكرويّة؟
تنتقل التدرجات الخطية الألوان على طول خط مستقيم بزاوية معينة. تنتقل التدرجات الكرويّة الألوان من نقطة مركزية في شكل دائري أو بيضاوي.
هل تعمل تدرجات CSS في جميع المتصفحات؟
نعم. جميع المتصفحات الحديثة (Chrome، Firefox، Safari، Edge) تدعم linear-gradient، radial-gradient، و conic-gradient دون الحاجة إلى مُعدّلات متصفح.
هل يمكنني تأنيم تدرجات CSS؟
لا يمكن تأنيم التدرجات مباشرة باستخدام تحولات CSS. ومع ذلك، يمكنك تأنيم وضعية التدرج باستخدام background-position أو استخدام @property في CSS لتأثيرات مخصصة في المتصفحات الداعمة.
كيف أجعل تدرجًا شفافًا؟
استخدم قيم الألوان rgba() أو hsla() مع قناة ألفا. مثال: rgba(102, 126, 234, 0.5) يعطيك إصدارًا شفافًا من اللون.
هل هذه الأداة تخزن بيانات التدرج الخاص بك؟
لا. يتم إنشاء جميع التدرجات تمامًا داخل متصفحك. لا تُرسل أي بيانات إلى خادم.