أدوات المطور
منتقي التدرج
اختر ألوانًا أو تدرجات و انسخ قيمة CSS
CSS value
تشكيلات سريعة
كيفية استخدام منتقي التدرج
1.
اختر لونًا ثابتًا أو انتقل إلى التدرج
استخدم عناصر التحكم للتبديل وضبط نقاط الألوان.
2.
اضبط التدرج والزاوية والشفافية
قم بالضبط حتى تحصل على النتيجة المناسبة.
3.
انسخ قيمة CSS
انقر نسخ لاستخدامها في CSS أو أدوات التصميم.
ميزات منتقي التدرج
ألوان ثابتة وتدرجات
التبديل بين لون ثابت وتدرجات خطية/شعاعية.
تحكم متقدم
زاوية، نقاط متعددة، شفافية وتشكيلات مسبقة.
مخرج جاهز للنسخ
سلسلة CSS واحدة جاهزة للصق.
الأسئلة الشائعة
Q: كيف أعكس اتجاه التدرج؟
A: قم بزيادة الزاوية 180° (مثلًا 90° → 270°) أو بدّل نقاط الألوان.
Q: هل يمكن تعديل مواقع نقاط الألوان؟
A: نعم، اسحب النقاط أو أدخل القيم.
Q: هل تُحفَظ التدرجات تلقائيًا؟
A: لا. هذه الأداة لا تحفظ التدرجات؛ انسخ قيمة CSS عند الانتهاء.
- فك تشفير JWT
فك تشفير وتحليل رموز JWT
- مولد JWT
إنشاء رموز JWT مع رؤوس وحمولات مخصصة
- منشئ cURL
بناء أوامر cURL مع رؤوس وطرق وخيارات مخصصة
- مولد هاش Bcrypt
تشفير كلمات المرور باستخدام bcrypt مع عامل تكلفة قابل للتكوين
- مختبر التعبيرات النمطية
اختبار التعبيرات النمطية مع تمييز مباشر وتفاصيل التطابق
- محول الوقت
تحويل بين تنسيقات الوقت المختلفة مع دعم المناطق الزمنية
- مفرق النصوص / فك التفرقة
فرق وفك تفرقة النصوص لـ JSON، URL، HTML وXML مع معالجة ثنائية الاتجاه
- منسق البيانات
تنسيق والتحقق من صحة JSON و XML و YAML و SQL مع تمييز لوني للنحو
- مشفر Base64
ترميز النص إلى تنسيق Base64
- فك تشفير Base64
فك ترميز النص Base64 إلى التنسيق الأصلي
- الصورة إلى Base64
تحويل الصور إلى عناوين URL للبيانات Base64
- Base64 إلى صورة
تحويل بيانات Base64 إلى صور مع معاينة وتحميل
- محول ASCII
تحويل النص إلى رموز ASCII والعكس
- منتقي التدرج
اختر ألوانًا أو تدرجات و انسخ قيمة CSS
- لوحة الألوان
منتقي ألوان تفاعلي مع إخراج متعدد التنسيقات
- منتقي ألوان الصور
استخراج الألوان من الصور بدقة مثالية للبكسل
- مولد الأيقونات المفضلة
إنشاء أحجام متعددة من الأيقونات المفضلة من النص والرموز التعبيرية أو الصور
- مفسر تعبيرات Cron
تحليل وشرح تعبيرات cron بتنسيق مقروء
- عارض JSON
عرض واستكشاف بيانات JSON في بنية شجرية
- مولد UUID
توليد معرفات فريدة بسهولة.
- مولد التجزئة
توليد تجزئات مختلفة لمدخلاتك.
- إعادة تسمية الملفات بالجملة
إعادة تسمية عدة ملفات باستخدام الأنماط وتنزيلها كملف ZIP
- تصغير الكود
تصغير CSS وJavaScript وHTML لتقليل حجم الملف
منتقي التدرج
اختر ألوانًا أو تدرجات و انسخ قيمة CSS
CSS value
تشكيلات سريعة
كيفية استخدام منتقي التدرج
1.
اختر لونًا ثابتًا أو انتقل إلى التدرج
استخدم عناصر التحكم للتبديل وضبط نقاط الألوان.
2.
اضبط التدرج والزاوية والشفافية
قم بالضبط حتى تحصل على النتيجة المناسبة.
3.
انسخ قيمة CSS
انقر نسخ لاستخدامها في CSS أو أدوات التصميم.
ميزات منتقي التدرج
ألوان ثابتة وتدرجات
التبديل بين لون ثابت وتدرجات خطية/شعاعية.
تحكم متقدم
زاوية، نقاط متعددة، شفافية وتشكيلات مسبقة.
مخرج جاهز للنسخ
سلسلة CSS واحدة جاهزة للصق.
الأسئلة الشائعة
Q: كيف أعكس اتجاه التدرج؟
A: قم بزيادة الزاوية 180° (مثلًا 90° → 270°) أو بدّل نقاط الألوان.
Q: هل يمكن تعديل مواقع نقاط الألوان؟
A: نعم، اسحب النقاط أو أدخل القيم.
Q: هل تُحفَظ التدرجات تلقائيًا؟
A: لا. هذه الأداة لا تحفظ التدرجات؛ انسخ قيمة CSS عند الانتهاء.
About CSS Gradient Generator
Design beautiful CSS gradients visually without writing code. Create linear, radial, and conic gradients with multiple color stops, adjust angles and positions, and copy the ready-to-use CSS property directly into your stylesheet.
Key Features
- Visual gradient designer with color stop controls
- Linear, radial, and conic gradient types
- Adjust angle and direction for linear gradients
- Preview gradient in real-time on sample elements
- Copy complete CSS background property with one click
How to Use
- Select gradient type: linear, radial, or conic
- Add color stops and pick colors using the color picker
- Drag stops to adjust position; set the gradient angle
- Copy the generated CSS code and paste it into your stylesheet
Frequently Asked Questions
What types of CSS gradients can I create?
The tool creates all three CSS gradient types: linear-gradient() for directional fades, radial-gradient() for circular/elliptical gradients, and conic-gradient() for pie-chart-style gradients.
Can I add more than two colors to a gradient?
Yes. Add as many color stops as you want. Click "Add Stop" to insert additional colors at custom positions along the gradient.
What does the gradient angle control?
For linear gradients, the angle sets the direction. 0° goes bottom to top, 90° goes left to right, 180° goes top to bottom, 270° goes right to left.
Will the CSS work in all browsers?
CSS gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). No vendor prefixes are needed for production use in 2025.