What's the difference between linear, radial, and conic gradients?

Linear gradients flow in a straight line from one color to another, perfect for backgrounds and buttons. Radial gradients radiate from a center point outward, ideal for spotlight effects. Conic gradients rotate around a center point like a color wheel, great for loading spinners and creative designs.

How do I add multiple colors to my gradient?

Click the "Add Color Stop" button to add additional colors to your gradient. You can position each color stop at specific percentages along the gradient path and adjust their colors individually. Remove color stops by clicking the delete button next to each color.

Are the generated gradients compatible with all browsers?

Yes! Our generator produces CSS with all necessary browser prefixes (-webkit-, -moz-, -o-) and fallbacks for older browsers. The generated code works across all modern browsers and provides graceful degradation for legacy browsers.

Can I save or export my gradient designs?

Absolutely! Copy the generated CSS code directly, export as CSS files, or save gradient configurations as JSON for later use. You can also generate gradient images in various formats for use in design software or presentations.

How do I control gradient direction and angle?

For linear gradients, use the angle slider or input field to set precise degrees (0-360°). You can also use directional presets like "to top", "to bottom", "to right". For radial gradients, adjust the position and shape controls to customize the gradient's center point and spread.

What are some best practices for using gradients in web design?

Use subtle gradients for backgrounds to avoid overwhelming content. Ensure sufficient contrast for text readability. Consider accessibility by providing solid color fallbacks. Use gradients consistently throughout your design system, and test on different devices and screen sizes for optimal appearance.

مولّد تدرج CSS

أنشئ انتقالات سلسة بين لونين أو أكثر مع تحكم في الاتجاه ومعاينة مباشرة

عناصر تحكم التدرج

نوع التدرج

خطي شعاعي مخروطي

الاتجاه

نقاط اللون

تدرجات جاهزة

كود CSS

معاينة مباشرة

حجم المعاينة

شكل المعاينة

أدوات التدرج

مولّد تدرج احترافي

أنشئ تدرجات CSS مذهلة بمولّدنا المتقدم. صمّم تدرجات خطية وشعاعية ومخروطية مع معاينة مباشرة وإنشاء فوري لكود CSS لمشاريع الويب الحديثة.

لماذا تختار مولّد التدرج لدينا؟

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

Multiple gradient types
Real-time preview
Custom color stops

Professional CSS output
Browser compatibility
Export options

أنواع تدرج متعددة

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

معاينة فورية

شاهد تغييرات تدرجك فورًا بمعاينة مباشرة. اضبط الألوان والمواضع والزوايا مع استجابة بصرية فورية.

ناتج CSS احترافي

أنشئ كود CSS نظيفًا ومحسّنًا مع بادئات المتصفحات وبدائل احتياطية لأقصى توافق مع جميع المتصفحات الحديثة.

مثالي لـ:

Website backgrounds
Button designs
Card components

Hero sections
Mobile app designs
UI element styling

كيف يعمل:

اختر نوع التدرج

اختر من بين أنواع التدرج الخطي أو الشعاعي أو المخروطي حسب متطلبات تصميمك.

تخصيص الألوان والإعدادات

أضف نقاط ألوان، واضبط الزوايا والمواضع، واضبط انتقالات التدرج بدقة مع معاينة مباشرة.

نسخ كود CSS

احصل على كود CSS محسّن مع بادئات المتصفحات جاهز للاستخدام في مشاريع الويب.

الأسئلة الشائعة

يتدفق التدرج الخطي في خط مستقيم من لون إلى آخر، وهو مثالي للخلفيات والأزرار. أما التدرج الشعاعي فينتشر من نقطة مركزية إلى الخارج، وهو مثالي لتأثيرات الإضاءة المركزة. ويدور التدرج المخروطي حول نقطة مركزية كعجلة الألوان، وهو رائع لمؤشرات التحميل والتصاميم الإبداعية.

انقر على زر "إضافة نقطة لون" لإضافة ألوان إلى تدرجك. يمكنك وضع كل نقطة لون عند نسبة مئوية محددة على مسار التدرج وضبط ألوانها فرديًا. احذف نقاط الألوان بالنقر على زر الحذف بجانب كل لون.

نعم! ينتج مولّدنا كود CSS مع جميع بادئات المتصفحات اللازمة (-webkit-, -moz-, -o-) وبدائل للمتصفحات القديمة. يعمل الكود المُنشأ عبر جميع المتصفحات الحديثة ويوفر تراجعًا سلسًا للمتصفحات القديمة.

بالتأكيد! انسخ كود CSS المُنشأ مباشرة، أو صدّره كملفات CSS، أو احفظ إعدادات التدرج بصيغة JSON للاستخدام لاحقًا. يمكنك أيضًا إنشاء صور تدرج بصيغ متنوعة لاستخدامها في برامج التصميم أو العروض التقديمية.

بالنسبة للتدرج الخطي، استخدم شريط تمرير الزاوية أو حقل الإدخال لتحديد درجات دقيقة (0-360°). يمكنك أيضًا استخدام الإعدادات الاتجاهية الجاهزة مثل "إلى الأعلى" و"إلى الأسفل" و"إلى اليمين". بالنسبة للتدرج الشعاعي، اضبط عناصر التحكم في الموضع والشكل لتخصيص نقطة مركز التدرج وانتشاره.

استخدم تدرجات خفيفة للخلفيات لتجنب طغيانها على المحتوى. تأكد من وجود تباين كافٍ لسهولة قراءة النص. راعِ إمكانية الوصول بتوفير ألوان بديلة صلبة. استخدم التدرجات بشكل متسق في نظام تصميمك، واختبرها على أجهزة وأحجام شاشات مختلفة للحصول على أفضل مظهر.