مولّد تدرّج CSS متعدد النقاط

كيف يعمل

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

ما الفرق بين التدرّج الخطي والتدرّج الشعاعي؟

يتقدّم التدرّج الخطي (linear-gradient) في خط مستقيم وفق زاوية محددة، بينما ينطلق التدرّج الشعاعي (radial-gradient) من نقطة مركزية ويمتد دائريًا نحو الخارج، وهو تأثير يُستخدم غالبًا لهالات الضوء أو لخلفيات الأقسام الدائرية.

ماذا يعني موضع النقطة اللونية؟

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

معالجة محلية 100%: يتم تركيب التدرّج وتوليد الكود مباشرة في متصفحك، دون إرسال أي بيانات.