هل هناك مشكلة في هذه الأداة؟
عن «مولّد تدرجات CSS أونلاين عبر الإنترنت»
تبني هذه الأداة تدرجات CSS خطية ودائرية ومخروطية بصريًا. أضف توقفات الألوان، اختر الاتجاه أو الزاوية، اضبط الشفافية، وتولد الأداة كود CSS المطابق الجاهز للصق في ورقة الأنماط الخاصة بك.
التدرجات في كل مكان في تصميم الويب الحديث: خلفيات hero، حالات الأزرار، لمسات البطاقات، والنص المتدرج. صياغة بناء جملة تدرج CSS يدويًا متعب — يتيح لك التحرير البصري تجربة الانتقالات السلسة دون تعديلات بالتجربة والخطأ.
يدعم الإخراج الميزات الحديثة مثل توقفات الألوان المتعددة، وتحديد المواقع بالنسبة المئوية، وداخلية اللون في فضاءات ألوان مختلفة، والتدرجات المخروطية للتأثيرات الدائرية. انسخ كـ CSS أو كفئة أداة Tailwind.
كيف تستخدم هذه الأداة
كيف أُجمّع تعريف CSS linear-gradient بنقطتين؟
اختر النقطتين
«Color 1» و «Color 2» يقبلان أي لون CSS: hex (`#1e3a8a`)، rgb (`rgb(30 58 138)`)، rgba بقناة alpha، أو الأسماء (`navy`). النقطة الأولى عند 0%، والثانية عند 100%.
اضبط الزاوية
«Angle (deg)» يضبط اتجاه التدرّج بالدرجات. `0` من الأسفل للأعلى، `90` من اليسار لليمين، `180` من الأعلى للأسفل (افتراضي CSS)، `45` القطر الكلاسيكي.
اضغط «تشغيل»
تعيد النتيجة حقلًا واحدًا `css`: `linear-gradient(<angle>deg, <color1>, <color2>)`. ألصقه مباشرة كقيمة لـ `background:` أو `background-image:`.
ما بعد نقطتين
للنوع radial أو conic أو 3+ نقاط، عدّل الخرج يدويًا — البنية `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. أو انتقل إلى محرّر تدرّجات أغنى؛ هذه الأداة مقصودة بساطتها للنوع linear بنقطتين.