ForHosting KIT · قراءة المواقع ومراقبتها

أنشئ تدرج CSS خطيا أو شعاعيا

اختر خطيًا أو شعاعيًا، وحدد الاتجاه أو الشكل ونقاط الألوان، لتحصل على تدرج CSS جاهز للصق: الزاوية 135deg مع ثلاث نقاط عند 0% و45% و100% تعطي قيمة linear-gradient(). مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

أنشئ تدرجا قابلا لإعادة الاستخدام في CSS من دون تجميع علامات الترقيم يدويا أو التخمين بشأن موضع كل نقطة. اختر تدرجا خطيا أو شعاعيا، وحدد اتجاهه أو شكله، ثم أضف نقطتي لون مرتبتين على الأقل. يمكن أن تحتوي كل نقطة على لون CSS وموضع اختياري. تكون النتيجة قيمة حتمية واحدة جاهزة لاستخدامها في تصريح background-image أو رمز تصميم أو ورقة أنماط أو شيفرة تطبيق. تُرفض الأنواع والأوصاف والمواضع غير الصالحة وقوائم النقاط غير المكتملة مع أخطاء إدخال واضحة.

اختر فئة التدرج وهندسته

ابدأ بالسلوك المرئي الذي تحتاج إليه. يتحرك التدرج الخطي على محور، ولذلك ينبغي أن يكون واصفه زاوية CSS مثل 135deg أو اتجاها بكلمات مفتاحية مثل to right أو to bottom أو to top left. أما التدرج الشعاعي فينتشر إلى الخارج من نقطة.

يمكن للواصف أن يحدد circle أو ellipse، وأن يضيف اختياريا حجما مثل closest-side أو farthest-corner، وأن يعين نقطة منشأ بعد at، مثل circle at center أو ellipse farthest-corner at 25% 40%. إن فصل الهندسة عن الألوان يجعل الطلب أسهل في المراجعة وإعادة الاستخدام. يتحقق المولد من الواصف وفقا للفئة المختارة بدلا من ضم أجزاء عشوائية بلا فحص.

وبذلك يكتشف أخطاء مثل تقديم شكل شعاعي لتدرج خطي قبل وصول القيمة إلى ورقة الأنماط. كما يمنع إخفاء الفواصل أو المحارف التي تكسر التصريح داخل وصف الهندسة. اختر linear عندما ينبغي أن يكون للانتقال اتجاه حركة واضح، واختر radial عندما ينبغي أن ينتشر التصميم من نقطة بؤرية.

أنشئ قائمة مرتبة من نقاط الألوان

أضف نقاط الألوان بالترتيب نفسه الذي ينبغي أن تظهر به في CSS. تتطلب كل نقطة لونا، ويتطلب التدرج الكامل نقطتين على الأقل لأن الانتقال لا يمكن أن يوجد بلون واحد. يمكنك استخدام صيغ CSS المألوفة، مثل أسماء الألوان والقيم السداسية وrgb() وhsl() والصياغة الدالية الحديثة المفصولة بمسافات.

موضع النقطة اختياري. عند حذفه، يوزع المتصفح النقاط غير المحددة وفقا لقواعد تدرجات CSS. وعند إدخاله، يجب أن يتضمن طولا أو نسبة مئوية واحدة أو اثنتين، مثل 0% أو 12px أو 30% 45%.

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

يحافظ هذا التحقق على نتيجة متوقعة، مع إبقاء اختيار اللون والأسلوب الفني تحت سيطرتك.

استخدم القيمة المولدة في CSS والأتمتة

تحتوي الاستجابة على حقل gradient تبدأ قيمته بـ linear-gradient() أو radial-gradient(). عيّن هذه القيمة إلى background-image، أو إلى الاختصار background عندما لا يلزم الاحتفاظ بطبقات خلفية أخرى. ويمكنك أيضا تخزينها في خاصية مخصصة مثل --hero-gradient والرجوع إلى الرمز عبر المكونات.

ولأن القدرة لا تنفذ إلا التحقق الحتمي وتجميع النصوص، فإن الإدخال نفسه ينتج دائما المسافات نفسها والمخرجات نفسها. تفيد هذه الثباتية في توليد الشيفرة واختبارات اللقطات ومنشئات السمات وأنظمة المحتوى التي تقارن القيم المولدة بايتا ببايت. لا تؤثر أي مطالبة شبكية أو عملية اختيار عشوائية أو استدلال نموذج أو قراءة للساعة في النتيجة.

عند دمج المخرج، تذكر أن هذه الأداة تولد قيمة صورة التدرج لا قاعدة CSS كاملة؛ إذ يحدد تطبيقك المحدد والخاصية والقيم الاحتياطية والحجم وأي لون خلفية مصمت مطلوب للبيئات القديمة أو المقيدة.

حالات الاستخدام

أنشئ رموز تصميم

حوّل إعدادات لوحة الألوان والهندسة المنظمة إلى قيم تدرج ثابتة لسمة مشتركة أو مكتبة مكونات.

شغّل محرر أنماط مرئيا

حوّل عناصر التحكم في النوع والاتجاه والشكل والألوان والمواضع إلى CSS جاهز للمعاينة المباشرة.

ولد قيم الأنماط أثناء البناء

أنشئ سلاسل تدرج متسقة من ملفات الإعداد من دون صيانة منطق مخصص للضم والتحقق.

الأسئلة الشائعة

هل يمكن حذف موضع نقطة اللون؟

نعم. تضع المتصفحات النقاط غير المحددة تلقائيا وفقا لقواعد تدرجات CSS.

ما الاتجاهات الخطية المدعومة؟

استخدم زاوية بوحدة deg أو grad أو rad أو turn، أو اتجاها مثل to right أو to bottom أو to top left.

هل يمكن نقل مركز التدرج الشعاعي؟

نعم. أضف موضعا باستخدام at إلى الواصف الشعاعي، مثل circle at center أو ellipse at 20% 40%.

ما التكلفة؟

أما مشغل المتصفح في هذه الصفحة فهو مجاني.

كيف أصنع شريط لون حادًا بدل انتقال ناعم؟

أعطِ نقطة اللون موضعين، مثل 30% 45%، فيملأ اللون نفسه هذا المقطع كله ويشكّل شريطًا واضح الحدود. والمواضع المتداخلة أو التنازلية تصنع أيضًا انتقالات حادة، ويُحفظ الترتيب الذي أدخلته.

أدوات ذات صلة

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/css-gradient-generate

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/css-gradient-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}'

const res = await fetch("https://api.kit.forhosting.com/web/css-gradient-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "gradient_type": "linear",
    "direction_or_shape": "to right",
    "color_stops": [
      {
        "color": "#2563eb",
        "position": "0%"
      },
      {
        "color": "#7c3aed",
        "position": "100%"
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/css-gradient-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "gradient_type": "linear",
    "direction_or_shape": "to right",
    "color_stops": [
        {
            "color": "#2563eb",
            "position": "0%"
        },
        {
            "color": "#7c3aed",
            "position": "100%"
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-gradient-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-gradient-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "gradient_type": "linear",
  "direction_or_shape": "to right",
  "color_stops": [
    {
      "color": "#2563eb",
      "position": "0%"
    },
    {
      "color": "#7c3aed",
      "position": "100%"
    }
  ]
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.css_gradient_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

استخدم القيمة المولدة في CSS والأتمتة

يعد مشغل المتصفح مناسبا للتصميم التفاعلي، بينما تبلغ تكلفة كل مطالبة API مؤتمتة $0.002.

أسئلة تقنية

كم نقطة لون مطلوبة؟

يلزم تقديم نقطتي لون على الأقل. يفشل الطلب ذو العدد الأقل مع خطأ invalid_input.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا

اختر فئة التدرج وهندسته

أنشئ قائمة مرتبة من نقاط الألوان

استخدم القيمة المولدة في CSS والأتمتة

حالات الاستخدام

أنشئ رموز تصميم

شغّل محرر أنماط مرئيا

ولد قيم الأنماط أثناء البناء

الأسئلة الشائعة

أدوات ذات صلة

للمطوّرين — الوصول عبر API

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

استخدم القيمة المولدة في CSS والأتمتة

أسئلة تقنية

شكرًا