Stax

مولد CSS Gradient

بناء تدرجات CSS خطية وشعاعية بصرياً ونسخ الكود.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

ما هو مولّد التدرج؟

أداة بصرية لإنشاء تدرجات CSS احترافية. اختر ألواناً، نوع التدرج (linear/radial/conic)، اتجاهاً - تحصل على معاينة فورية وكود CSS جاهز للنسخ. أساسية لخلفيات الويب الحديث، الأزرار، البطاقات.

أنواع التدرج

  1. Linear - مستقيم بين نقطتين
  2. Radial - دائري من نقطة (أو بيضاوي)
  3. Conic - دوّار (للساعات، charts)
  4. Repeating - مكرر بنمط ثابت
  5. متعدد - دمج عدة تدرجات بطبقات

تدرجات شائعة

  • Sunset: #ff7e5f إلى #feb47b
  • Ocean: #2193b0 إلى #6dd5ed
  • Purple Bliss: #360033 إلى #0b8793
  • Sky: #2980B9 إلى #6DD5FA
  • Mojito: #1d976c إلى #93f9b9

نصائح للتصميم

2-3 ألوان فقط (أكثر = فوضى). ألوان متجاورة على عجلة الألوان. 45 درجة الزاوية الأكثر جاذبية. أضف overlay شفاف للنص (rgba black 0.3). للموبايل، استخدم صورة WebP بدلاً من تدرج CSS كبير. UIGradients.com لإلهام يومي.

الأسئلة الشائعة

كيف أصنع تدرج CSS؟
linear-gradient(direction, color1, color2)'. مثال: 'background: linear-gradient(to right, #ff0000, #0000ff)' = أحمر إلى أزرق أفقياً. 'to bottom right' للقطر. الزوايا: 45deg = نفس to top right. أضف ألوان متعددة: 'red, yellow, blue'.
ما الفرق بين linear وradial؟
Linear: تدرج مستقيم بين نقطتين. Radial: دائري من المركز. 'radial-gradient(circle at center, white, black)' = شمس بيضاء على خلفية سوداء. Conic: تدرج دوّار (مفيد للساعات). كل نوع له استخدامات بصرية مختلفة.
هل التدرجات بطيئة؟
تدرج واحد: أداء ممتاز (GPU). تدرجات متعددة على عناصر كثيرة: قد يبطئ. لخلفية ضخمة، استخدم WebP بدلاً من تدرج CSS كبير. التدرجات الذكية: استخدم CSS gradient لخلفية الصفحة، صور مضغوطة للعناصر الصغيرة.
كيف أصنع تدرج جذاب؟
استخدم 2-3 ألوان فقط (أكثر = فوضى). الألوان المتجاورة على عجلة الألوان (تشابه). تجنب الألوان المتضادة الحادة. UIGradients.com لإلهام. 45 درجة هو الزاوية الأكثر استخداماً (دافئة بصرياً). أضف overlay شفاف لإصلاح تباين النص.

أدوات ذات صلة