مولّد تدرّجات CSS

حول هذه الأداة

يبني المولّد تدرّجًا خطيًا بين لونين، ويعرضه في معاينة مباشرة، ويتيح نسخ CSS العادي أو صنف خلفية اختياري في Tailwind.

طريقة الاستخدام

حدّد اللونين والزاوية، ثم أنشئ التدرّج وتحقّق من شكله في شريط المعاينة قبل نسخ تصريح background أو صنف bg-[linear-gradient(…)]. وفي مشروع يعتمد Tailwind يبقى الصنف الاختياري أقصر كتابةً.

مثال

الإعداد الافتراضي يعرض تدرّجًا مائلًا من الأزرق السماوي إلى الأخضر.

إدخال

135deg · #0ea5e9 → #22c55e

مخرجات

background: linear-gradient(135deg, #0ea5e9, #22c55e);

نصيحة

التدرّجات ذات النقاط الكثيرة تبقى أسهل صيانة إذا حفظتها في متغيّرات CSS.

معلومات مفيدة