مولّد تدرجات CSS

كيف تعمل

كل نقطة لون هي كائن يحمل لونًا وموضعًا من 0 إلى 100. مع كل تغيير، تُرتَّب النقاط حسب الموضع قبل توليد الناتج، لذا يمكنك كتابة المواضع بأي ترتيب وتبقى النتيجة صالحة. ثم تُدمج في linear-gradient(<الزاوية>deg, ...) أو radial-gradient(circle, ...) حسب النوع الذي اخترته. تُطبَّق نفس هذه السلسلة النصية كخلفية للمعاينة وتُطبع كناتج، لذا فإن المعاينة يرسمها متصفحك فعليًا بنفس كود CSS الذي تنسخه، وليست تقريبًا.

إذا بدا التدرج بين لونين مشبعين باهتًا في المنتصف، فهذه ليست مشكلة في الأداة: تقوم المتصفحات بحساب التدرجات في فضاء ألوان sRGB افتراضيًا، والمسار المستقيم بين أزواج معينة من الألوان (الأزرق إلى الأصفر مثال كلاسيكي) يمر بلون رمادي غير مشبع. الحل هو إضافة نقطة وسطى بلونٍ زاهٍ حقيقي تريده، وهو ما تجعله هذه الأداة سهلًا.

يُبنى التدرج بالكامل ويُطبَّق في جافاسكريبت هذه الصفحة؛ اختيار الألوان وتحريك زاوية الميل لا يُنشئ أي طلب شبكة، ويمكنك التحقق من ذلك بنفسك في تبويب الشبكة بأدوات المطوّر.