مولّد التدرجات CSS
صمّم التدرجات بصريًا وانسخ CSS.
أنشئ تدرجات خطية أو شعاعية بلونين وزاوية وموضع توقّف. شاهد المعاينة مباشرة بينما تعدّل، ثم انسخ التصريح النهائي.
135°
100%
لون البداية
لون النهاية
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);كيفية بناء تدرّج
- اختر خطّيًا أو شعاعيًا كنوع للتدرّج.
- اختر اللونين بأدوات اختيار الألوان.
- عدّل الزاوية وموضع التوقّف بالمنزلقات.
- انسخ CSS الناتج والصقه في ملف أنماطك.
الأسئلة الشائعة
ما الفرق بين التدرّج الخطّي والشعاعي؟
التدرّج الخطّي يسري في اتجاه واحد على خط مستقيم، بينما ينتشر التدرّج الشعاعي من نقطة مركزية إلى الخارج.
هل يمكن استخدام الناتج في الأنماط الداخلية؟
نعم. انسخ تصريح background إلى أي قاعدة CSS أو سمة style.
هل تغادر الألوان متصحني؟
لا. يعمل المولّد بالكامل على جهازك دون أي رفع للملفات.