مولّد تدرج CSS
أنشئ تدرجات CSS جميلة بصرياً. يعمل على جهازك — لا يُرفع شيء ولا يُخزَّن شيء.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
انقر على تدرج لتحميله فوراً
ابنِ تدرّج CSS بصريًا وانسخ الكود. اختر خطيًا أو دائريًا أو مخروطيًا، وحدد الألوان ومكان كل لون، وتعرض المعاينة الحيّة النتيجة. يعطيك صندوق الإخراج تعريفًا جاهزًا للصق مثل background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); مع زر نسخ.
يأخذ التدرج الخطي زاوية من 0 إلى 360 درجة مع ثمانية أزرار بأسهم للاتجاهات الشائعة. ويتيح الدائري اختيار دائرة أو قطع ناقص وموضع المركز (الوسط أو أحد الجوانب أو الزوايا)، ويأخذ المخروطي زاوية بداية وموضعًا. لكل نقطة لونية أداة اختيار لون خاصة بها ومنزلق للموضع من 0 إلى 100% ومنزلق للشفافية، وعندما تقل الشفافية عن 100% يكتب الكود ذلك اللون بصيغة rgba(). يمكنك إضافة نقاط أو حذفها بحد أدنى نقطتان. وتحمّل اثنتا عشرة تهيئة جاهزة بأسماء مثل Ocean Breeze وAurora وLava وRainbow نقطة انطلاق.
لماذا تعمل هذه الأداة على جهازك
لا شيء حساسًا في التدرج اللوني، فالأثر على الخصوصية هنا صغير. المعاينة وكود CSS وتصدير PNG كلها تُنتَج في متصفحك، فتستجيب فورًا ودون حساب أو طلب إلى خادم.
- اختر خطيًا أو دائريًا أو مخروطيًا، أو حمّل إحدى التهيئات الجاهزة.
- اضبط الزاوية أو الموضع، ثم عدّل لون كل نقطة وموضعها وشفافيتها.
- أضف نقاطًا أو احذفها حتى تظهر المعاينة كما تريد.
- انسخ كود CSS، أو صدّر صورة PNG بحجم 1200×600.
- ناتج CSS تعريف background واحد بالصيغة القياسية. لا تُضاف بادئات المتصفحات ولا لون موحّد احتياطي ولا دوال التدرج المتكرر.
- تصدير PNG دائمًا صورة 1200×600 وهو رسم مبسّط. التصدير الدائري دائمًا دائرة في الوسط ويتجاهل الشكل والموضع اللذين اخترتهما، والمخروطي دائمًا في الوسط، لذلك قد يختلفان عن المعاينة. انسخ كود CSS إن أردت النتيجة الدقيقة.
- تحميل تهيئة جاهزة يستبدل النوع والزاوية والنقاط، لكن التهيئة الدائرية أو المخروطية تُبقي الشكل والموضع وزاوية البداية التي ضبطتها من قبل.
- تُضبط ألوان النقاط بأداة اختيار اللون بصيغة hex. ولا يمكنك كتابة اسم لون أو قيمة hsl() أو متغيّر CSS في نقطة.