مولد التدرج
رائج 🔥إنشاء تدرجات CSS بصرياً
كيفية استخدام مولد التدرج
- 1اختر نوع التدرج (خطي / شعاعي / مخروطي)
- 2أضف الألوان وعدّل نقاط التوقف
- 3اضبط الزاوية أو الاتجاه
- 4انسخ كود CSS المُنشأ
حول مولد التدرج
مُنشئ التدرجات هو أداة بصرية لإنشاء تدرجات CSS جميلة. يدعم التدرجات الخطية والشعاعية والمخروطية مع تحكم كامل في الألوان والزوايا ونقاط التوقف. ينشئ كود CSS جاهزًا للنسخ مباشرة.
المميزات الرئيسية لـ مولد التدرج
- تدرجات خطية وشعاعية ومخروطية
- منتقي ألوان مرئي
- معاينة فورية
- نقاط توقف متعددة
- كود CSS جاهز
- Supports linear gradients with unlimited color stops
- Works entirely in-browser — no server required
- Generated CSS is clean and ready to paste into any stylesheet
أمثلة
تدرج بسيط
تدرج من الأزرق إلى البنفسجي
المدخلات
من: #3B82F6، إلى: #8B5CF6، زاوية: 135°
النتيجة
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
Build a multi-stop sunset gradient
Create a warm three-color gradient for a decorative UI element.
المدخلات
Angle: 180°, Stops: #FF6B6B at 0%, #FFE66D at 50%, #FF8E53 at 100%
النتيجة
background: linear-gradient(180deg, #FF6B6B 0%, #FFE66D 50%, #FF8E53 100%);
حالات الاستخدام الشائعة
- تصميم خلفيات صفحات الويب
- إنشاء أزرار وبطاقات جميلة
- تطوير أنظمة التصميم
- إضافة عمق بصري للتطبيقات
- تعلم تدرجات CSS
- Learning CSS gradient syntax by seeing code generated from visual adjustments
استكشاف الأخطاء
تدرج لا يظهر
الحل
تأكد من اختيار لونين مختلفين على الأقل
الكود لا يعمل في المتصفح
الحل
تأكد من دعم المتصفح للصيغة المختارة — conic-gradient يحتاج متصفحات حديثة
Generated CSS does not work in my browser
الحل
Linear gradients using standard CSS syntax are supported in all modern browsers. If you need IE11 support, add a vendor-prefixed fallback: -webkit-linear-gradient().
الأسئلة الشائعة
هل يمكنني إضافة أكثر من لونين؟
نعم، يمكنك إضافة عدد غير محدود من نقاط التوقف.
هل الكود المُنشأ يعمل في جميع المتصفحات؟
linear-gradient وradial-gradient مدعومان في جميع المتصفحات الحديثة. conic-gradient يحتاج متصفحات أحدث.
Can I create a gradient that repeats?
The generator creates standard linear-gradient(). For repeating patterns, change the CSS property name to repeating-linear-gradient() in your stylesheet after copying the generated code.
What is the difference between background-color and background when using gradients?
CSS gradients are images, not colors, so they must be applied using the background or background-image property, not background-color. Using background is the most concise approach.
Can I use this gradient for text?
Yes. Apply the generated CSS to the text element, then add: -webkit-background-clip: text; background-clip: text; color: transparent; to clip the gradient to the text characters.
How many color stops can I add?
CSS gradients support unlimited color stops. For usability, keeping gradients to 2–4 stops is recommended. Very complex gradients with many stops can be hard to reproduce or adjust later.
Is my data sent to a server?
No. Gradient generation happens entirely in your browser. No data is transmitted or stored.
Can I export the gradient as an image?
The tool generates CSS code. To export the gradient as an image, take a screenshot of the preview panel or use a canvas-based tool to render and download the gradient as a PNG.