مولّد تدرج CSS
رتّب وقفات اللون ونسبها، واختر شكل التدرج وزاويته، ثم عاين خلفية مولدة وانسخ CSS.
طريقة الاستخدام
- اضبط القيم والخيارات أو جرّب المثال.
- أنشئ الكود وراجع المعاينة أو الحسابات.
- انسخ النتيجة أو نزّلها وجرّبها داخل تصميمك.
المعاينة تستخدم الألوان والنسب التي تدخلها فقط. قد يختلف عرض التدرجات بين الشاشات.
فعّل JavaScript لاستعمال الأداة ومعالجة البيانات محلياً داخل متصفحك.
مثال يساعدك تبدأ
بيانات توضيحية. تتغير النتيجة عندما تتغير المدخلات أو الإعدادات.
- المدخلات
ثلاث وقفات: #2f6b56 عند 0% و#b8cf8d عند 55% و#f3e6bf عند 100%.
- الإعدادات
تدرج خطي بزاوية 135°.
- النتيجة المتوقعة
background-image: linear-gradient(135deg, #2f6b56 0%, #b8cf8d 55%, #f3e6bf 100%).
متى تستعملها؟
- ثلاث وقفات: #2f6b56 عند 0% و#b8cf8d عند 55% و#f3e6bf عند 100%. تدرج خطي بزاوية 135°.
- رتّب وقفات اللون ونسبها، واختر شكل التدرج وزاويته، ثم عاين خلفية مولدة وانسخ CSS.
أسئلة عن الأداة
ماذا تعالج أداة مولّد تدرج CSS؟
رتّب وقفات اللون ونسبها، واختر شكل التدرج وزاويته، ثم عاين خلفية مولدة وانسخ CSS.
ما حدود النتيجة التي تنتجها؟
المعاينة تستخدم الألوان والنسب التي تدخلها فقط. قد يختلف عرض التدرجات بين الشاشات.