NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →منشئ تدرجات CSS (خطي، شعاعي، مخروطي)
اختر نوع التدرج وحدد الزاوية وأضف أو احذف نقاط توقف الألوان بمواضعها. معاينة حية. انسخ تعريف خلفية CSS بنقرة واحدة.
نقاط توقف الألوان
- 0%
- 100%
أدوات ذات صلة
كيف تعمل
ثلاثة أنواع من التدرجات في CSS
التدرج الخطي: تنتقل الألوان على طول خط مستقيم بزاوية معينة. 0° يشير للأعلى، 90° يشير لليمين (اتجاه القراءة الافتراضي)، 180° يشير للأسفل. الأكثر شيوعاً للخلفيات والأزرار وأقسام الهيرو.
التدرج الشعاعي: تنتقل الألوان للخارج من نقطة مركزية. يمكن أن تكون الشكل دائرة (افتراضي) أو قطعاً ناقصاً. الأفضل لتأثيرات الضوء المسلّط والعناصر الشمسية أو القطع الزخرفية الجاذبة للانتباه.
التدرج المخروطي: تدور الألوان حول نقطة مركزية، مثل عجلة الألوان. أقل شيوعاً لكنه قوي للمخططات الدائرية ووجوه الساعات أو الدوارات الزخرفية. مدعوم في المتصفحات الحديثة منذ 2020.
نقاط توقف الألوان ونظام النسب المئوية
كل نقطة توقف لها لون وموضع من 0% إلى 100%. 0% هو بداية التدرج، 100% هو النهاية. نقتان توقف تعطيان تدرجاً سلساً بلونين. إضافة نقطة ثالثة في المنتصف تخلق مزيجاً ثلاثي الألوان أو نطاقاً حاداً حسب الموضع.
للانتقالات الحادة (بدون مزج)، ضع نقتين في نفس الموضع بألوان مختلفة. مثلاً، '#000 50%، #fff 50%' تخلق انقساماً حاداً أسود إلى أبيض عند نقطة المنتصف. هكذا تُنشأ الخلفيات 'المخططة'.
نصائح الأداء وإمكانية الوصول
تُعرض التدرجات بشكل أصلي بدون طلبات HTTP، على عكس صور الخلفية. تتوسع بلا نهاية بدون فقدان الجودة. وهي صديقة للتحريك: انتقل الموضع عبر background-position أو حرّك نقاط توقف التدرج بخصائص مخصصة.
إمكانية الوصول: لا تضع النص مباشرةً فوق تدرج معقد إذا كان التباين يتفاوت عبر التدرج. استخدم إما طبقة لون ثابت، تأكد أن متوسط إضاءة التدرج يتباين مع النص، أو اختبر بمدقق التباين. يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير.
أسئلة شائعة
›هل التدرجات مدعومة في المتصفحات القديمة؟
التدرجات الخطية والشعاعية تعمل في جميع المتصفحات الحديثة بما فيها Edge وFirefox وChrome وSafari (منذ 2014). التدرجات المخروطية تتطلب Chrome 69+ وFirefox 83+ وSafari 12.1+ — للمتصفحات الأقدم، استخدم الخطي كبديل.
›هل يمكنني استخدام هذه في React Native أو تطبيقات الهاتف؟
تدرجات CSS للويب لا تُترجم لـ React Native مباشرةً — استخدم مكتبات مثل `react-native-linear-gradient`. نقاط التوقف تُترجم، لكن الصيغة تختلف. واجهات iOS وAndroid تستخدم واجهات API خاصة بالمنصة.
›هل يمكنني استخدام ألوان مُسمّاة؟
نعم. استبدل أي رمز hex (مثلاً #ff0000) باسم لون CSS (red، dodgerblue، إلخ) في حقل النص بجانب منتقي الألوان.
›لماذا يبدو تدرجي المخروطي غريباً؟
التدرجات المخروطية تدور بعقارب الساعة من الزاوية التي تحددها. تبدو أفضل مع نقاط توقف متعددة تغطي الدوران الكامل 360°. مع نقتين فقط تبدو ناقصة في الغالب.
›كيف أنشئ تأثير 'توهج'؟
استخدم تدرجاً شعاعياً مع نقطة توقف شفافة تماماً في النهاية: مثلاً، 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.
›هل يمكنني تحريك التدرج؟
CSS لا تُحرّك نقاط توقف التدرج مباشرةً، لكن يمكنك تحريك background-position لتأثير متحرك، أو استخدام خصائص CSS المخصصة (المتغيرات) وتحديثها بـ JavaScript.
›لماذا CSS طويل جداً؟
كل نقطة توقف تضيف لوناً وموضعاً. التدرجات الطويلة ذات النقاط الكثيرة تنتج CSS مفصّلاً. للنتائج الأبسط، التزم بـ 2-3 نقاط توقف.
›هل تغادر البيانات متصفحي؟
لا. كل شيء يُحسب محلياً؛ لا يُرسل شيء للخادم.
خدمات موصى بها
إفصاحCloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →