KERLION
مولد تدرجات CSS
🎨أنشئ تدرجات لونية احترافية بنقرة
👁️ معاينة التدرج
خطي
KERLION
⚙️ التحكم
اتجاه التدرج
135°
0°
شكل الشعاعي
مركز الشعاعي
نقاط اللون
✨ معاينة النص المتدرج
KERLION
💻 كود CSS
🌟 تدرجات جاهزة
📋 سجل التدرجات
لم يتم حفظ تدرجات بعد — كل تغيير يتم حفظه تلقائياً
📖 طريقة الاستخدام
1
اختر نوع التدرج
اختر بين خطي أو شعاعي أو مخروطي — كل نوع يعطي تأثير مختلف
2
حدد الألوان والمواضع
أضف حتى 8 نقاط لونية — كل لون له موقع نسبي في التدرج مع التحكم في الشفافية
3
اضبط الاتجاه والمركز
استخدم القرص الدائري أو شريط التمرير لتغيير الزاوية
4
انسخ الكود المناسب
اختر من 5 أنماط كود: خلفية، نص متدرج، حدود، ظل، أو كود كامل جاهز
5
حمل كصورة أو استخدم السجل
حمّل التدرج كصورة PNG بضغطة واحدة. كل تعديل يُحفظ في السجل تلقائياً
🎨 ما هي تدرجات CSS وكيف تُستخدم؟
تدرجات CSS (CSS Gradients) هي طريقة لإنشاء انتقالات لونية سلسة بين لونين أو أكثر بدون استخدام صور — المتصفح بيحسب الألوان بنفسه في الوقت الحقيقي. ده معناه إن التدرجات خفيفة جداً في التحميل وبتشتغل على أي حجم شاشة بدون ما تفقد الجودة. تدرجات CSS بتُستخدم في تصميم المواقع والمدونات لتجميل الخلفيات والأزرار والنصوص وعناصر الـ UI المختلفة.
الأنواع الثلاثة للتدرجات: الخطي (linear) بيتبع اتجاه مستقيم من نقطة لنقطة، الشعاعي (radial) بيخرج من مركز واحد بشكل دائري أو بيضاوي، والمخروطي (conic) بيلف حوالين المركز بزواوية معينة زي عجلة الألوان. كل نوع ليه استخداماته المميزة في التصميم.
التدرج الخطي مناسب لخلفيات الصفحات والـ Hero Sections لأنه بيدي إحساس بالاتجاه والحركة
التدرج الشعاعي ممتاز لأزرار التفاعل والأيقونات لأنه بيدي إحساس بالإضاءة من المركز
التدرج المخروطي بيعطي تأثيرات فنية مميزة ومختلفة عن الأنواع التانية
الأداة بتولّد كود CSS جاهز للنسخ — خلفية أو نص متدرج أو حدود أو ظل أو كود كامل
❓ أسئلة شائعة عن تدرجات CSS
🌈ما الفرق بين التدرج الخطي والشعاعي والمخروطي؟
▼التدرج الخطي (Linear) بيمر بلونين أو أكتر على خط مستقيم بزاوية معينة — مثلاً من فوق لتحت أو من الشمال لليمين. التدرج الشعاعي (Radial) بيبطل الألوان من نقطة المركز للخارج بشكل دائري أو بيضاوي — زي النور لما بيضي من مصدر واحد. التدرج المخروطي (Conic) بيلف الألوان حوالين المركز بزاوية 360 درجة — زي عجلة الألوان أو ساعة. كل نوع ليه استخداماته: الخطي للخلفيات، الشعاعي للأزرار والأيقونات، المخروطي للتأثيرات الفنية.
🌐هل تدرجات CSS بتشتغل على جميع المتصفحات؟
▼آيوه، تدرجات CSS مدعومة في كل المتصفحات الحديثة بما فيها Chrome و Firefox و Safari و Edge. التدرج الخطي والشعاعي مدعومين من سنين كتير. التدرج المخروطي (conic-gradient) مدعوم في المتصفحات الحديثة لكن ممكن يشتغلش في نسخ قديمة جداً. الأداة بتولّل كود CSS يشتغل على أغلب المتصفحات الحالية بدون مشاكل.
✨كيف أجعل التدرج يتحرك أو يتحرّك؟
▼الأداة فيها زر تشغيل/إيقاف الحركة (▶️) — لما تفعّله، التدرج بيبدأ يتحرك بسلاسة. الكود اللي بتولّده الأداة بيستخدم CSS animations مع background-size و background-position عشان يعمل التأثير ده. تقدر تتحكم في سرعة الحركة من خلال تعديل قيمة الـ animation-duration في الكود.
🎨ما هو أفضل عدد ألوان للتدرج؟
▼العدد الأمثل عادة من 2 لـ 4 ألوان. تدرج بلونين بسيط ونظيف ومناسب لمعظم الاستخدامات. 3 ألوان بتعطي عمق أكتر وتأثير أجمل. أكتر من 4 ألوان ممكن يبقى حلو في الحالات الفنية بس لازم تكون حريص على اختيار الألوان المتناسقة. الأداة بتسمحلك تضيف حتى 8 ألوان وتتحكم في موقع كل لون بنسبة مئوية.
📱هل التدرجات بتأثر على سرعة الموقع؟
▼لأ، تدرجات CSS خفيفة جداً على الأداء لأن المتصفح بيحسبها برمجياً بدون تحميل أي صور. تدرج CSS بياخد أقل من 1 كيلوبايت من الكود مقارنة بصورة تدرج ممكن تكون أكتر من 100 كيلوبايت. كمان بتشتغل على أي حجم شاشة بدون ما تفقد الجودة (responsive by nature).
🖼هل أقدر أحمل التدرج كصورة PNG؟
▼آيوه! الأداة فيها زر تحميل PNG (💾) بيولّد صورة بحجم 1920×1080 بيكسل من التدرج الحالي. الصورة بتنزل مباشرة على جهازك. ده مفيد لو عايز تستخدم التدرج في تصميمات Figma أو Photoshop أو كخلفية في تطبيقات مش بتدعم CSS.
✅
تم النسخ!