مولد تدرجات CSS — مجاني على الإنترنت
أنشئ تدرجات CSS خطية وشعاعية ومخروطية جميلة مع معاينة مباشرة. انسخ كود CSS فوراً.
Who uses the مولد تدرجات CSS?
- مطوّرو الواجهة الأمامية الذين ينشئون تدرجات خلفية لأقسام البطل ومكونات الواجهة.
- المصممون الذين يصممون نماذج أولية لهويات بصرية قائمة على التدرج وانتقالات ألوان العلامة التجارية.
- متعلمو CSS الذين يفهمون صياغة التدرجات من خلال أداة إنشاء مرئية وتفاعلية.
How the مولد تدرجات CSS works
اختر نوع التدرج: Linear أو Radial أو Conic.
انقر على عينة لون نقطة توقف لتغيير لونها باستخدام منتقي الألوان.
استخدم شريط التمرير بجانب كل نقطة لضبط موضعها، أو انقر على «+ Add color stop» لإضافة نقطة جديدة.
اضبط الزاوية (linear/conic)، ثم انسخ كود CSS من لوحة الناتج.
Tips & tricks
- تحتاج إلى نقطتي لون على الأقل — يظهر زر الحذف (×) فقط عند وجود 3 نقاط أو أكثر.
- تُخفي التدرجات الشعاعية عنصر التحكم بالزاوية لأن التدرج الدائري المتمركز لا يملك اتجاهًا لضبطه.
- تُعرض النقاط دائمًا حسب ترتيب الموضع في CSS الناتج، بغض النظر عن ترتيب إضافتها.
- لا يدعم منتقي الألوان قناة ألفا/الشفافية — أضف rgba() يدويًا في CSS المنسوخ إذا احتجت نقطة شفافة.
Frequently Asked Questions
ما صياغة CSS للتدرج الخطي؟
background: linear-gradient(الاتجاه, اللون1, اللون2). مثال: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). يمكن أن يكون الاتجاه زاوية (45deg) أو كلمة مفتاحية (to right، to bottom right).
كيف أنشئ تدرجًا شعاعيًا؟
background: radial-gradient(الشكل الحجم at الموضع, اللون1, اللون2). مثال: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). تُنشئ هذه الأداة تدرجًا شعاعيًا دائريًا متمركزًا.
هل يمكنني إضافة أكثر من نقطتي لون؟
نعم. انقر على «+ Add color stop» بقدر ما تحتاج. لكل نقطة منتقي ألوان وشريط تمرير موضع خاص بها، ويتم فرز النقاط تلقائيًا حسب الموضع في CSS الناتج.
كيف أنشئ تدرجًا شفافًا؟
استخدم rgba() أو صيغة hex مع ألفا للنقاط الشفافة. مثال: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) يُنشئ تلاشيًا إلى الظلام — يُستخدم شائعًا كطبقة تراكب على صور البطل (hero) لتحسين وضوح النص. لا يتضمن منتقي الألوان في هذه الأداة قناة ألفا، لذا عدّل CSS المنسوخ يدويًا للشفافية.
هل يعمل تدرج CSS في جميع المتصفحات؟
تدرجات CSS مدعومة في جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge وOpera). بادئة المورّد (-webkit-) ليست مطلوبة بشكل صارم للمتصفحات الحديثة، رغم أن هذه الأداة تُضمّن سطرًا ببادئة -webkit- في ناتجها لتغطية المتصفحات الأقدم.
Is my data safe when using the مولد تدرجات CSS?
Completely safe. The مولد تدرجات CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the مولد تدرجات CSS output in commercial projects?
Yes. The مولد تدرجات CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the مولد تدرجات CSS follow official standards?
Yes. The مولد تدرجات CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.