مولد التدرج CSS: خطي، شعاعي، مخروطي (ومصيدة الزاوية)

لقد فقدت معظم فترة ما بعد الظهر بسبب التدرج مرة واحدة. ليست معقدة - خلفية البطل على صفحة التسويق WP Adminify، اللون الأزرق يتلاشى إلى اللون البرتقالي، قطريًا. كتبت linear-gradient(45deg, #4466EE, #E99537) وقد سارت الأمور في الاتجاه الخاطئ. لذلك حاولت -45deg. خطأ أيضا. ثم 135degلقد كان هذا صحيحًا، وقد انتقلت دون أن أفهم السبب، وهي أسوأ نتيجة ممكنة لأنها تضمن لك &#39؛ سوف أخطئ مرة أخرى.

والسبب هو أن زوايا التدرج CSS ليست هي الزوايا التي تعلمتها في فصل الرياضيات. 0deg نقاط يصل، وتزداد الزاوية في اتجاه عقارب الساعة. في علم المثلثات - وفي SVG، وفي القماش - 0 نقطة قائمة والزوايا تزداد عكس اتجاه عقارب الساعة. اتفاقيتان مختلفتان، إحداهما متطابقة المظهر deg الوحدة، ولا توجد رسالة خطأ عند اختيار الرسالة الخاطئة. It&#39؛s مكتوبة بوضوح في وحدة صور CSS المستوى 3وأنا ببساطة لم أقرأها قط.

That&#39؛s حالة المولد البصري في حكاية واحدة. ال مولد التدرج يمنحك Toolz.dev معاينة مباشرة، وتوقفات ألوان قابلة للسحب، وCSS قابلة للنسخ للتدرجات الخطية والشعاعية والمخروطية - لذا فإن سؤال الزاوية يجيب على نفسه بدلاً من أن يكلفك فترة ما بعد الظهر.

ليرة تركية؛DR: في CSS، 0deg يشير إلى أعلى والزوايا تجري في اتجاه عقارب الساعةلذا to right يساوي 90deg والقطر من أعلى اليسار → أسفل اليمين هو 135degلا 45deg. يستخدم مولد التدرج لرؤيته بدلاً من تخمينه، و منتقي الألوان لاختيار نقاط التوقف التي لا &#39؛ تصبح موحلة في المنتصف. التدرجات هي <image> القيم - في أي مكان يمكنك استخدامه url()، يمكنك استخدام التدرج. كل جانب العميل، لا يوجد تسجيل.

ما هو تدرج CSS، من الناحية الفنية؟

التدرج ليس لونًا. It&#39؛s صورة. هذه الحقيقة الوحيدة تفسر معظم بناء الجملة.

لكل صور CSS المستوى 3، linear-gradient()، radial-gradient()، ومتغيراتها المتكررة تنتج قيمة النوع <image>. وهذا يعني في أي مكان تقبله المواصفات url('photo.jpg')، كما أنه يقبل التدرج: background-image، border-image، list-style-image، mask-image، content. ويعني أيضًا أن التدرجات لها لا توجد أبعاد جوهرية- تمتد لملء المربع الذي وضعته فيه، ولهذا السبب يبدو نفس التدرج مختلفًا على زر 200 بكسل وبطل 1400 بكسل.

conic-gradient() جاء لاحقا ويعيش فيه صور CSS المستوى 4، جنبًا إلى جنب مع بناء جملة الاستيفاء واللون والمسافة I&#39؛ سأصل إلى الأسفل.

ماذا &#39؛s الفرق بين الخطي والشعاعي والمخروطي؟

التدرجات الخطية - واتفاقية الزاوية

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

التزم بهذا في الذاكرة وأنت &#39؛ لن أكرر بعد ظهر اليوم أبدًا

هناك &#39؛s دقة أخرى مع الكلمات الرئيسية الزاوية. to bottom right يفعل لا يعني ببساطة 135deg. تحدده المواصفات على أنه زاوية مختارة بحيث يكون خط التدرج متعامدًا مع آخر قطري - وهو ما يعني على مربع غير مربع، to bottom right و 135deg إنتاج نتائج مختلفة بشكل واضح. على المربع هم &#39؛ متطابقون. هذا &#39؛ هذا هو نوع الشيء الذي تلاحظه في الساعة 11 مساءً عندما تبدو البطاقة صحيحة في التصميم وخاطئة في عمود ضيق.

التدرجات الشعاعية - حيث تعيش الكلمات الرئيسية ذات الحجم

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

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

• closest-side- أقرب حافة للصندوق
• farthest-side- الحافة الأبعد
• closest-corner- أقرب زاوية
• farthest-corner- الزاوية الأبعد (هذا هو الافتراضي)

تغيير الكلمة الأساسية ويبدو التدرج وكأنه تدرج مختلف. هذا هو السبب الوحيد الأكثر شيوعًا للتدرج الشعاعي &quot؛Won&#39؛t افعل ما أريد واقتباس؛ ومن الأسرع بكثير النقر فوق الخيارات الأربعة الموجودة في مولد التدرج من التفكير في ذلك.

التدرجات المخروطية - الفطائر والعجلات والحلقات

لون الاجتياح المخروطي حول المركز، بدءًا من الساعة 12 o&#39؛ الساعة والذهاب في اتجاه عقارب الساعة (نفس التقليد الخطي - على الأقل it&#39؛s متسق).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

الذي - التي mask الخط هو الحيلة الكاملة وراء كل مؤشر لتقدم الدونات أنت &#39؛ لقد رأيت من قبل، وهو &#39؛s حوالي ستة أسطر من CSS بدلاً من مكتبة SVG.

كيف أتحكم في مكان أرض الألوان؟

يتوقف اللون

قم بإيقاف الوضع وأنت تتحكم في عملية الانتقال. إعطاء توقف اثنين المواقف وستحصل على ميزة صعبة - لا يوجد استيفاء على الإطلاق.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

تلميحات الاستيفاء (نقطة المنتصف التي قمت بها &#39؛ أعلم أنه يمكنك التحرك)

نسبة عارية بين لونان يحركان نقطة المنتصف 50/50. هذه هي القطعة الأكثر استخدامًا من بناء جملة التدرج التي أعرفها

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

استخدمه لـ scrims الصورة. أ to top, rgba(0,0,0,.8), transparent عادةً ما يأكل التراكب الكثير من الصورة؛ إسقاط أ 35% تلميح وانهار الظلام باتجاه الأسفل حيث يوجد التعليق.

تكرار التدرجات للأنماط

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

سطر واحد، لا يوجد ملف صورة، قابل للتطوير بشكل لا نهائي. فقط don&#39؛ قم بتطبيقه على عنصر صفحة كاملة ثم تساءل لماذا يعد التمرير المتلعثم على نظام Android متوسط المدى - إعادة طلاء تدرج متكرر كبير أثناء التمرير عملاً حقيقيًا للمركب.

لماذا يبدو التدرج الخاص بي موحلًا في المنتصف؟

سببان منفصلان، ويخلطهما الناس باستمرار.

السبب 1: الاستيفاء sRGB

افتراضيًا، تمزج المتصفحات توقفات التدرج في sRGB، قناة تلو الأخرى. بالنسبة للونين الموجودين بالقرب من بعضهما البعض على العجلة - الأزرق إلى الأرجواني، والبرتقالي إلى الأحمر - فهذا &#39؛s جيد. بالنسبة للألوان التكميلية، فإنه ينتج شريطًا رماديًا ميتًا في المنتصف، لأن نقطة المنتصف الرياضية لاثنين من ألوان sRGB المتقابلة يكون رمادي تقريبًا. الأزرق إلى الأصفر هو الجاني الكلاسيكي.

يعمل المستوى 4 من صور CSS على إصلاح هذه المشكلة عن طريق السماح لك بتسمية مساحة الاستيفاء

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch يحافظ على ثبات الخفة والصفاء عبر المزيج. دعم المتصفح ل in <colorspace> يعد بناء الجملة جيدًا في Chrome وSafari وFirefox الحالية، ولكن إذا كنت بحاجة إلى دعم المتصفحات القديمة، فإن البديل هو الإصلاح اليدوي القديم: أضف نقطة توقف وسيطة وقم بتوجيه المزيج بنفسك.

السبب 2: التلاشي إلى transparent- وخطأي الثاني

transparent يتم تعريفه على أنه rgba(0, 0, 0, 0). شفاف أسود. إذا تم تحريف المتصفحات بسذاجة، linear-gradient(#E99537, transparent) سوف ينزلق عبر اللون البرتقالي الرمادي الداكن تدريجيًا في طريقه إلى لا شيء.

المتصفحات الحديثة لا &#39؛ تفعل ذلك - تتطلب المواصفات الاستيفاء مضاعف مساحة ألفا، التي تتجنب المشكلة تمامًا. لكن WebKit الأقدم لم يفعل ذلك، وقمت بشحن بطل على موقع عميل بدا نظيفًا على جهازي وبدا وكأنه لطخة قذرة على جهاز iPad البالغ من العمر عامين. النسخة المضادة للرصاص، والتي لا تكلفك شيئًا ولا تزال تعمل في كل مكان

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

ما زلت أكتبها بهذه الطريقة من الأنسجة الندبية.

ما الذي يجب أن أعتذر عنه فيما يتعلق بإمكانية الوصول؟

يجب أن يستمر التباين عبر التدرج بأكمله

WCAG 2.1 SC 1.4.3 يتطلب 4.5:1 للنص العادي و3:1 للنص الكبير (18pt، أو 14pt غامق). التدرج يعني أن لون الخلفية الخاص بك يختلف عند كل بكسل، لذلك يجب استيفاء المتطلبات مقابل أسوأ حالة النقطة - أخف تصحيح إذا كان النص الخاص بك أبيض، وأغمق إذا كان &#39؛s أسود.

النمط الموثوق به هو التوقف عن محاولة جعل التدرج نفسه قابلاً للقراءة، ووضع طبقة من السكريم في الأعلى

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

الآن يقع النص على نطاق مظلم معروف بغض النظر عما يفعله التدرج الموجود أسفله. تحقق من النهايات مع منتقي الألوان قبل الشحن - تتوفر إرشادات التباين الكامل، بما في ذلك لون العلامة التجارية التي قمت بشحنها عند 2.38:1، في دليل منتقي الألوان.

النص المتدرج هو الباب المسحور

هذا هو الذي أحرقني بالفعل على الصفحة المقصودة للإنتاج

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

لو background-clip: text لا ينطبق &#39؛t لأي سبب من الأسباب - متصفح قديم، ملحق يحظر صور الخلفية، ورقة أنماط الطباعة - you&#39؛re متبقي مع color: transparent و عنوان غير مرئي. لا يزال النص موجودًا في DOM، لذلك يقرأه قارئ الشاشة بسعادة وليس لديك أي فكرة عن وجود أي خطأ. يستخدم @supports لبواباته:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

اللون الصلب افتراضيًا، التدرج كتعزيز. هذا &#39؛ كيف كان ينبغي كتابتها في المرة الأولى.

تحتاج التدرجات المتحركة إلى فتحة هروب الحركة

يمكنك &#39؛t التدرج الانتقالي الألوان- المتصفح فاز &#39؛t الاستيفاء بين اثنين <image> قيم. ما يحركه الناس بدلاً من ذلك هو background-position عبر التدرج كبير الحجم:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

هذه الكتلة الأخيرة ليست اختيارية. تعتبر حركة الخلفية المستمرة محفزًا موثقًا للاضطرابات الدهليزية والشرف prefers-reduced-motion هو ثلاثة أسطر.

(البديل الحديث هو تسجيل خاصية مخصصة مع @property لذلك نوعه معروف و لذلك قابل للتحريك، ثم استخدمه داخل التدرج. It&#39؛s نظيف، it&#39؛s مدعوم في المتصفحات الحالية، ولا يزال it&#39؛s يستحق الحصول على واقي الحركة المنخفضة.)

كيف يمكنني بناء واحدة باستخدام الأداة؟

1. افتح ال مولد التدرج.
2. اختر النوع - خطي، شعاعي، أو مخروطي.
3. انقر فوق توقف لتغيير لونه؛ اسحبه لتحريك موضعه. انقر على الشريط لإضافة توقف؛ اسحبه لإزالته.
4. للخطية، اسحب الزاوية. شاهد الرقم: هذا هو المكان الذي 0degتتوقف اتفاقية -IS-UP عن كونها مجردة.
5. بالنسبة للشعاعية، قم بتدوير الكلمات الرئيسية ذات الأحجام الأربعة وشاهد ما يتغير. It&#39؛ هي أسرع طريقة لبناء الحدس لهم.
6. انسخ CSS.

عادة ما يكون اللونان هو الإجابة الصحيحة. كل تدرج I&#39؛ لقد ندمت على خمس توقفات.

التدرجات تستحق السرقة

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

قم بتغذية ألوان علامتك التجارية الخاصة في منتقي الألوان أولاً، خذ قيم HSL، ثم قم بتغيير الخفة بدلاً من اللون - that&#39؛s كيف تحصل على توقفات تمتزج بشكل نظيف بدلاً من القتال.

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

لماذا يسير تدرج CSS الخاص بي في الاتجاه الخاطئ؟

لأن زوايا التدرج CSS تبدأ عند أعلى وزيادة في اتجاه عقارب الساعة، على عكس علم المثلثات، أو SVG، أو القماش، الذي يبدأ من اليمين ويتجه عكس اتجاه عقارب الساعة. to right يكون 90deg، to bottom يكون 180deg، والقطري من أعلى اليسار إلى أسفل اليمين هو 135degلا 45deg.

هل ما زلت بحاجة -webkit- بادئات تدرجات CSS؟

ليس ل linear-gradient()، radial-gradient()، أو conic-gradient()- تعمل الثلاثة جميعها بدون بادئة في كل متصفح حالي. المكان الوحيد الذي لا تزال البادئة تحفظه فيه هو -webkit-background-clip: text للحصول على نص متدرج، حيث يحتاج Safari الأقدم إليه. شحن كلا الإعلانين هناك.

هل يمكنني تحريك تدرج CSS؟

ليست قيمة التدرج نفسها - التدرج هو <image>، وفاز المتصفح &#39؛t الاستيفاء بين صورتين. الحل البديل القياسي هو جعل التدرج أكبر بكثير من مربعه (background-size: 600% 600%) وتحريك background-position. يقوم النهج الحديث بتسجيل خاصية مخصصة مع @property لذلك فهو من النوع المعروف ويصبح قابلاً للتحريك داخل التدرج. وفي كلتا الحالتين، احرسه prefers-reduced-motion.

لماذا يبدو التدرج الخاص بي رماديًا أو موحلًا في المنتصف؟

دائمًا ما يكون استيفاء sRGB بين الألوان التي تتقابل مع بعضها البعض على العجلة - الأزرق إلى الأصفر هو اللون الكلاسيكي. نقطة منتصف sRGB الخاصة بهم قريبة حقًا من اللون الرمادي. إصلاحه عن طريق تسمية مساحة استيفاء أفضل، linear-gradient(in oklch, to right, blue, yellow)، أو عن طريق إضافة نقطة توقف وسيطة لتوجيه المزيج بنفسك.

لماذا يتلاشى ل transparent تبدو قذرة؟

transparent يتم تعريفه على أنه rgba(0, 0, 0, 0)- شفاف أسود. يتم استيفاء المتصفحات الحالية في مساحة ألفا المضاعفة مسبقًا، لذلك لم تعد هذه مشكلة، ولكن WebKit الأقدم قام بسحب التدرج عبر اللون الرمادي في طريقه للخروج. إذا كنت تدعم الأجهزة القديمة، فاكتب إصدار Zero-alpha من اللون الخاص بك بشكل صريح rgba(233, 149, 55, 0) بدلا من transparent.

كيف أقوم بإنشاء حدود متدرجة؟

خيارين. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; هو سطر واحد ولكنه يقتل بصمت border-radius. إذا كنت بحاجة إلى زوايا مستديرة، فقم بطبقة خلفيتين مختلفتين background-clip و background-origin القيم، أو ضع التدرج على عنصر زائف خلف المربع.

هل تدرجات CSS سيئة للأداء؟

التدرج الثابت رخيص - أرخص من تنزيل صورة مكافئة، ويمكن قياسه إلى أي حجم مجانًا. تظهر التكاليف عندما يجب أن يكون هناك تدرج كبير أعيد طلاؤها بشكل متكرر: تدرج متكرر لصفحة كاملة أثناء التمرير، أو عدة تدرجات ذات طبقات أسفل ملف backdrop-filter. إذا بدت الصفحة لزجة على الهاتف المحمول، فهذا &#39؛ أول شيء I&#39؛d تحقق في DevTools&#39؛ ملف تعريف الطلاء.

كم عدد توقفات الألوان التي يجب أن يحتوي عليها التدرج؟

اثنان، في معظم الأوقات. ثلاثة عندما تريد توجيه المزيج من خلال درجة لون معينة. أبعد من ذلك أنت و#39؛ عادةً ما تصل إلى شيء ما، حيث يكون التدرج الشبكي (عدة شعاعيات موضوعة) أفضل، وكل توقف إضافي هو شيء آخر يمكن أن يبدو خاطئًا على عرض شخص آخر و#39؛s.

كيف يمكنني إنشاء خلفية متدرجة في CSS؟

تعيين background (أو background-image) خاصية دالة التدرج. background: linear-gradient(to right, #4466EE, #E99537); يرسم مزيجًا من اليسار إلى اليمين بدون ملف صورة على الإطلاق. radial-gradient() و conic-gradient() اتبع نفس النمط للمزج الدائري والمكتسح. نظرًا لأنه يتم إنشاء النتيجة بدلاً من تنزيلها، فإنها تظل حادة بأي حجم.

كيف أقوم بإنشاء نص متدرج في CSS؟

ضع التدرج على backgroundثم اضبط background-clip: text (مع -webkit- بادئة سفاري) و color: transparent، لذلك يتم ملء الحروف بالتدرج بدلاً من اللون الصلب. احتفظ بالنص الحقيقي في العلامات بدلاً من تحويله إلى صورة، بحيث يظل قابلاً للتحديد والقراءة بواسطة قارئات الشاشة.

إلتحاق بالركب

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

قم ببنائها حيث يمكنك رؤيتها. ال مولد التدرج مجاني، ويعمل بالكامل في متصفحك، وينسخ CSS النظيف. إقرانه مع منتقي الألوان للتوقفات التي تحمل التباين، و CSS Minifier عندما تكون &#39؛ جاهز لتضمينه. بقية الرف الأمامي موجود في دليل أدوات إنتاجية المطور.