مولد تدرج CSS

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

يمكنك تعيين زاوية التدرج بالدرجات (من 0ديج إلى 360ديج) أو استخدام كلمات مفتاحية مثل "إلى اليمين"، "إلى الأسفل"، "إلى أعلى اليمين"، إلخ. 0ديج تشير إلى الأعلى، و90ديج إلى اليمين، و180ديج إلى الأسفل، و270ديج إلى اليسار. تحدد الزاوية المحور الذي تنتقل الألوان على طوله، مما يتيح لك التحكم الكامل في اتجاه التدرج.

نعم! تدعم تدرجات CSS وقفات لونية غير محدودة. يمكنك إضافة ألوان متعددة لإنشاء تدرجات لونية معقدة ومتعددة الألوان. يمكن أن يكون لكل لون نسبة مئوية اختيارية للموضع (من 0% إلى 100%) للتحكم في مكان ظهوره في التدرج اللوني. هذا مثالي لإنشاء تأثيرات قوس قزح أو تدرجات غروب الشمس أو انتقالات لونية معقدة.

استخدم لونين متقاربين في التدرج اللوني أو التشبع أو الإضاءة. على سبيل المثال، انتقل من أزرق متوسط إلى أزرق أفتح أو أغمق قليلاً. حافظ على التباين منخفضًا وفكر في استخدام قيم HSL حيث يمكنك ضبط الإضاءة بنسبة 10-20% فقط. تضيف التدرجات اللونية الدقيقة العمق والاهتمام البصري دون أن تطغى على المحتوى.

تُدعم تدرجات CSS الحديثة (باستخدام التدرج الخطي والتدرج الشعاعي) في جميع المتصفحات الحالية دون استخدام بادئات البائع. ومع ذلك، إذا كنت بحاجة إلى دعم المتصفحات القديمة جدًا (IE9 وما قبله)، فقد تحتاج إلى بادئات البائع (-webkit- أو -moz- أو -o-) أو الألوان الصلبة الاحتياطية. بالنسبة لتطوير الويب الحديث، يعمل بناء جملة تدرج CSS القياسي في كل مكان.

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

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

نعم! استخدم زوايا بين 0ديج و360ديج للتدرجات القطرية. 45 درجة تنشئ تدرجًا قطريًا مثاليًا من أسفل اليسار إلى أعلى اليمين، و135 درجة من أسفل اليمين إلى أعلى اليسار. تضيف التدرجات القطرية اهتمامًا بصريًا ديناميكيًا ويمكنها توجيه العين عبر تصميمك.

استخدم تنسيقات ألوان RGBA أو HSLA مع قناة ألفا لإنشاء تدرجات لونية تتلاشى لتصبح شفافة. هذا مثالي لتأثيرات التراكب أو أقنعة الصور أو إنشاء عمق. على سبيل المثال، التدرج من rgba(0,0,0,0,1) إلى rgba(0,0,0,0) لإنشاء تدرج لوني يتلاشى إلى أسود شفاف.

تتحكم نقاط التوقف اللونية في مكان ظهور كل لون في التدرج اللوني (0% إلى 100%). يؤدي التباعد المتساوي إلى إنشاء انتقالات سلسة، بينما يؤدي تجميع نقاط التوقف معًا إلى إنشاء تغييرات حادة في اللون. على سبيل المثال، وضع لونين عند 50٪ ينشئ خطًا صلبًا، بينما يؤدي التباعد بينهما عند 40٪ و60٪ إلى إنشاء مزيج سلس.