وثائق CSS قابلة للتشغيل: التدرج اللوني

Q: كيف أصنع تدرجًا دائريًا radial في CSS؟

استخدم background-image: radial-gradient(#93c5fd, #1e3a8a);. أضف شكلًا وموضعًا قبل الألوان، مثل radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: ما الفرق بين circle وellipse في radial-gradient؟

ellipse (الافتراضي) يتمدد بنسب الصندوق، فيكون عريضًا في الصندوق العريض. أما circle فيبقي التدرج دائريًا مهما كان شكل الصندوق.

Q: كيف أضبط اتجاه التدرج الخطي؟

ضع اتجاهًا أو زاوية أولًا: linear-gradient(to right, red, blue) أو linear-gradient(45deg, red, blue). الافتراضي to bottom (180deg)؛ والزاوية 0deg تشير إلى الأعلى وتدور الزوايا مع عقارب الساعة.

Q: كيف أصنع خطوطًا حادة بدل المزج السلس؟

أعطِ لونين موضع التوقف نفسه: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) تبدّل اللون في المنتصف بلا مزج. وrepeating-linear-gradient تكرر نمطًا من هذه التوقفات.

Q: هل يمكنني استخدام تدرج كقيمة لـ background-color؟

لا. التدرج صورة، لذلك مكانه background-image أو الاختصار background. أما background-color: linear-gradient(...) فغير صالحة وتُتجاهل.

التدرجات الدائرية

تمزج radial-gradient() الألوان إلى الخارج من نقطة مركزية. ومثل كل تدرج في CSS، هي صورة، لذلك مكانها background-image (أو الاختصار background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

الصيغة الكاملة هي radial-gradient(shape size at position, color stops). كل ما قبل الألوان اختياري.

الجزء	القيم	الافتراضي
الشكل	`circle`، `ellipse`	`ellipse`
الحجم	`closest-side`، `closest-corner`، `farthest-side`، `farthest-corner`، أو أطوال	`farthest-corner`
الموضع	`at center`، `at top left`، `at 30% 70%`، `at 20px 40px`	`at center`
نقاط توقف الألوان	لونان أو أكثر، لكل منهما موضع اختياري

تحدد كلمة الحجم المفتاحية أين يُبلغ اللون الأخير: عند أقرب ضلع للصندوق، أو أبعد زاوية، وهكذا. غيّر القيم هنا وراقب التدرج يُعاد رسمه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب circle farthest-corner at 30% 50%, #f59e0b, #2563eb وellipse at bottom, white, #16a34a وcircle 40px, #f59e0b 99%, transparent (نقطة بحافة حادة).

التدرجات الخطية

تمزج linear-gradient() الألوان على امتداد خط مستقيم. ضع اتجاهًا أو زاوية أولًا، ثم الألوان:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

تبدأ الزوايا من 0deg متجهة إلى الأعلى وتدور مع عقارب الساعة، فـ 90deg تساوي to right، و180deg هي القيمة الافتراضية to bottom. تبقى to right فيزيائية في الصفحات التي تُقرأ من اليمين إلى اليسار؛ اعكسها بنفسك إن كان يجب أن يتبع التدرج اتجاه القراءة.

نقاط توقف الألوان والتوقفات الحادة

يمكن لكل لون أن يأخذ موضعًا. من دون مواضع تتوزع الألوان بالتساوي. وحين يشترك لونان في موضع واحد يكون التغيير فوريًا، وهكذا ترسم الخطوط والأعلام وأشرطة التقدم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

يمكن للتوقف أيضًا أن يأخذ موضعين، #111827 12px 24px، فيرسم شريطًا صلبًا من 12px إلى 24px.

التدرجات المخروطية

تدير conic-gradient() الألوان حول نقطة مركزية، مثل عقارب الساعة. ومع التوقفات الحادة ترسم مخططًا دائريًا من دون أي صور أو JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

المخطط المرسوم بـ CSS غير مرئي لقارئات الشاشة، لذلك ضع الأرقام في نص أيضًا.

النص المتدرج

قص خلفية متدرجة على شكل الحروف واجعل النص نفسه شفافًا:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

ضع في حسابك لونًا احتياطيًا عاديًا بـ color: إن فشل القص يختفي النص. والنص المتدرج تباينه غير متساوٍ أيضًا، فاستخدمه للعناوين الكبيرة فقط.

تتكدس التدرجات مع الصور والتدرجات الأخرى في قائمة background-image واحدة؛ وتشرح صفحة صورة الخلفية الطبقات والحجم والموضع.

أخطاء شائعة

background-color: linear-gradient(...). التدرج صورة: استخدم background-image أو background.
الدرجات في الاتجاه الخطأ. 0deg تشير إلى الأعلى لا إلى اليمين. و90deg تتجه نحو اليمين.
تدرج على عنصر بلا ارتفاع. لا يظهر شيء؛ أعطه محتوى أو حجمًا.
ألوان وسطى باهتة. مزج لونين متعاكسين مشبعين، كالأحمر والأخضر، يمر برمادي بني في sRGB. أضف توقفًا وسطيًا، أو امزج في فضاء لوني آخر: linear-gradient(in oklch, red, green).
تدرّج متقطع في التدرجات الكبيرة الخفيفة. الألوان المتقاربة جدًا على مساحة كبيرة تُظهر درجات منفصلة؛ قليل من التباين الإضافي بين التوقفات يساعد.

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

كيف أصنع تدرجًا دائريًا radial في CSS؟

استخدم background-image: radial-gradient(#93c5fd, #1e3a8a);. أضف شكلًا وموضعًا قبل الألوان، مثل radial-gradient(circle at top left, #93c5fd, #1e3a8a).

ما الفرق بين circle وellipse في radial-gradient؟

ellipse (الافتراضي) يتمدد بنسب الصندوق، فيكون عريضًا في الصندوق العريض. أما circle فيبقي التدرج دائريًا مهما كان شكل الصندوق.

كيف أضبط اتجاه التدرج الخطي؟

ضع اتجاهًا أو زاوية أولًا: linear-gradient(to right, red, blue) أو linear-gradient(45deg, red, blue). الافتراضي to bottom (180deg)؛ والزاوية 0deg تشير إلى الأعلى وتدور الزوايا مع عقارب الساعة.

كيف أصنع خطوطًا حادة بدل المزج السلس؟

أعطِ لونين موضع التوقف نفسه: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) تبدّل اللون في المنتصف بلا مزج. وrepeating-linear-gradient تكرر نمطًا من هذه التوقفات.

هل يمكنني استخدام تدرج كقيمة لـ background-color؟

لا. التدرج صورة، لذلك مكانه background-image أو الاختصار background. أما background-color: linear-gradient(...) فغير صالحة وتُتجاهل.

مفاهيم ذات صلة