مولد التدرجات CSS
إنشاء تدرجات CSS جميلة مع معاينة فورية
اختر الألوان
ألوان محددة مسبقاً
اتجاه التدرج
كود CSS
التدرجات الموصى بها
حول تدرجات CSS
التدرج الخطي
دالة linear-gradient() تنشئ تدرجات خطية تنتقل الألوان على طول خط مستقيم. تحكم في الزاوية بالدرجات أو الكلمات المفتاحية مثل "to right" و "to bottom." مثالية للأزرار والرؤوس والتراكبات الخلفية.
دعم المتصفح
تدرجات CSS مدعومة على نطاق واسع من قبل جميع المتصفحات الحديثة، بما في ذلك متصفحات الهاتف المحمول. لا حاجة لبادئات المورد للإصدارات الحالية، مما يضمن عرض تدرجاتك بشكل متسق عبر Chrome و Firefox و Safari و Edge.
فوائد الأداء
استخدام تدرجات CSS أكثر كفاءة من الصور. يتم تحميلها بشكل أسرع مع أحجام ملفات أصغر، وتتوسع بلا حدود دون فقدان الجودة، وتقلل طلبات HTTP. ستكون صفحاتك أخف وأكثر أداءً.
تحريك التدرج
يمكن دمج تدرجات CSS مع رسوم متحركة CSS لإنشاء تأثيرات تدرج ديناميكية. حرك background-position للتدرجات المتحركة أو انتقل بين الألوان للتغييرات السلسة في الحالة. رائع لتأثيرات التمرير وحالات التحميل.
التصميم المتجاوب
تتكيف التدرجات تلقائياً مع حجم الحاوية، وتدعم التصاميم المتجاوبة بشكل مثالي. سواء على الهاتف المحمول أو سطح المكتب، تملأ تدرجاتك حاوياتها بشكل جميل دون تكسر أو تشويه.
تدرجات متعددة الألوان
يدعم التدرجات بأكثر من لونين لتأثيرات بصرية أغنى. أضف نقاط توقف للألوان في نسب مئوية محددة للتحكم في مكان ظهور كل لون. أنشئ قوس قزح مذهل والشفق والانتقالات المعقدة.
استخدام تدرجات CSS في تصميم الويب
تدرجات الأزرار
تضيف أزرار التدرج عمقاً وتجذب الانتباه. استخدم تدرجات خفية للإجراءات الأساسية، وتدرجات حية للأزرار الترويجية. مولد التدرجات من ILovePalette ينشئ خلفيات زر مثالية مع انتقالات لون سلسة.
خلفيات Hero
خلفيات التدرج الكبيرة تخلق أجواء دون وزن الصورة. التدرجات القطرية من أعلى اليسار إلى أسفل اليمين تضيف طاقة. التدرجات العمودية تحاكي السموات والغروب. التدرجات المتداخلة مع الشفافية تنشئ خلط ألوان معقد.
تدرجات النص
طبق التدرجات على النص باستخدام background-clip: text للعناوين الجذابة. دمج مع -webkit-text-fill-color: transparent للنص المملوء بالتدرج. مثالي لأقسام العلامة التجارية وإبراز الميزات.
تراكبات البطاقات
تدرجات التراكب على الصور تضيف قابلية قراءة النص مع الحفاظ على الجاذبية البصرية. التدرجات الداكنة في أسفل البطاقات تنشئ مساحة للنص الأبيض. التدرجات الشعاعية الخفية تركز الانتباه على مناطق محددة.
أنماط التحميل
خلفيات التدرج المتحركة ت serve كمؤشرات تحميل جذابة. استخدم التدرجات المخروطية لتأثيرات الدوار. ميزة التدرج العشوائي من ILovePalette تولد مجموعات ألوان لا حصر لها للاستكشاف.
التصدير والتكامل
انسخ كود CSS مباشرة من المولد والصقه في ورقة الأنماط الخاصة بك. استخدم الأنماط المضمنة للنماذج الأولية السريعة. بناء جملة التدرج مباشر: linear-gradient(angle, color1, color2). جرب زوايا ومجموعات ألوان مختلفة حتى تجد التدرج المثالي.