منشئ تدرّجات CSS
جديدأنشئ تدرّجات CSS خطية وشعاعية ومخروطية مع معاينة مباشرة.
Click the bar to add a stop · drag a handle to move it.
Runs entirely in your browser. Nothing is uploaded.
منشئ تدرج CSS بصري يعمل في متصفحك
يحوّل هذا منشئ تدرج CSS الصياغة المعقدة لدوال linear-gradient() وradial-gradient() وconic-gradient() إلى بضع نقرات بسيطة. أضف نقاط ألوان واسحبها على شريط التدرج، اضبط الزاوية أو المركز، وشاهد معاينة حية بالحجم الكامل تتحدث فورياً. حين يبدو التدرج مثالياً، انسخ الكود الجاهز للإنتاج. لا شيء يُثبَّت ولا حساب يُنشأ، وكل تدرج يُعالَج محلياً دون أي رفع لبياناتك.
صُمِّمت هذه الأداة لتكون الأداة الوحيدة التي تحتاجها: أكثر اكتمالاً من المولّدات أحادية الغرض مثل cssgradient.io الذي لا يدعم التدرج المخروطي ولا يُخرج كود Tailwind، أو إضافة Colorzilla التي لا تدعم تصدير PNG. على خلاف أدوات التدرج في Canva التي تحجب الميزات خلف حساب إلزامي، أو أدوات Adobe التي تشترط اشتراك Creative Cloud، كل شيء هنا مجاني تماماً.
خطي وشعاعي ومخروطي — كل أنواع التدرج
بدّل بين منشئ التدرج الخطي (مزج على طول زاوية)، ومنشئ التدرج الشعاعي (بقعة ضوء من مركز، دائرة أو قطع ناقص، مع تحكم في الحجم والموضع)، ومنشئ التدرج المخروطي (ألوان تدور حول نقطة لعجلات الألوان والمخططات الدائرية). يعرض كل نوع عناصر التحكم التي يحتاجها فقط: زاوية للخطي، شكل وحجم وموضع للشعاعي، زاوية بداية ومركز للمخروطي.
أضف نقاط ألوان غير محدودة، اسحبها لإعادة تموضعها، واضبط شفافية كل نقطة لإنشاء تدرجات شفافة سلسة باستخدام rgba(). انقر على الشريط لإضافة نقطة جديدة في المكان الذي تريده. معظم الأدوات المنافسة كـ Colorzilla لا تدعم إلا نقطتين أو ثلاثاً؛ هنا لا حدود، فالتدرجات المعقدة ذات الخمس أو ست نقاط سهلة كالمزج البسيط بلونين.
انسخ CSS أو Tailwind أو SCSS — وصدّر PNG
الإخراج على بُعد نقرة. تبويب CSS يعطيك تعريف background جاهزاً مع خيار إضافة -webkit- كاحتياطي للمتصفحات القديمة (مع تحويل الزاوية بشكل صحيح). تبويب Tailwind ينتج فئات bg-gradient-to-r from-[...] to-[...] الاصطلاحية للتدرجات الخطية، مع قيمة اعتباطية bg-[linear-gradient(...)] للتدرجات الشعاعية والمخروطية. تبويب SCSS يُغلّف القيمة في متغير قابل لإعادة الاستخدام $gradient.
تحتاج صورة نقطية؟ تنزيل PNG يرسم التدرج المضبوط على لوحة بدقة 1600x900 — تنزيل PNG للتدرج حقيقي بدون علامة مائية وبدون رحلة إلى الخادم. Adobe Express يضع هذا خلف اشتراك مدفوع. TinyWow يتطلب رفع ملف. هنا كل شيء مجاني ولا شيء يغادر جهازك.
توليد تدرج من صورة
تريد تدرجاً يتناسب مع صورة علامة تجارية أو لقطة شاشة أو صورة منتج؟ استخدم من صورة: تأخذ الأداة عينات من بكسلات الصورة مباشرةً في متصفحك، تستخرج ألوانها السائدة، وتبني منها تدرجاً متعدد النقاط مرتباً من الفاتح إلى الغامق لمزج سلس. ولأن التحليل يحدث محلياً، لا تُرفع الصورة إلى أي مكان.
من هناك يمكنك ضبط النقاط المستخرجة، تغيير الزاوية، تخفيض شفافية لون، أو التبديل إلى مزج شعاعي أو مخروطي. إنها أسرع طريقة لبناء مقتطف خلفية CSS متدرجة يربط قسم البطل أو البطاقة أو الزر بصورة موجودة — دون حاجة لإضافة Figma أو امتداد Adobe.
إعدادات مسبقة ومولّد عشوائي وروابط قابلة للمشاركة
لا أفكار؟ انقر على أحد الإعدادات المسبقة المنسقة — غروب الشمس، المحيط، الشفق القطبي، النعناع، الخوخ وغيرها — لتحميل تدرج متقن، ثم عدّله من هناك. اضغط عشوائي للحصول على مزيج منسجم جديد من لونين أو ثلاثة. إنها نقطة انطلاق ممتازة حين تحتاج إلى شيء يبدو جميلاً دون إضاعة الوقت في نظرية الألوان.
كل تغيير تجريه يُشفَّر في عنوان URL، لذا فإن نسخ الرابط يمنح زميلاً التدرج الذي تراه بالضبط — بدون تصدير، ولا حساب، ولا لقطة شاشة. يحمل الرابط الألوان والنوع والزاوية والنقاط، ويعمل بالكامل من جانب العميل بدون بحث في الخادم. شيء لا تستطيع أدوات كـ Figma وCanva فعله بدون حساب.
خاص ومجاني — بدون رفع ولا حساب
لا تسجيل، ولا تكلفة، ولا شيء يُرفع. يعمل هذا منشئ تدرج CSS بالكامل على جهازك باستخدام JavaScript ولوحة HTML، لذا لا تغادر ألوان العلامات التجارية السرية والتصاميم غير المنشورة متصفحك أبداً. احفظه مرجعاً أساسياً لك كـمنشئ تدرج خطي وشعاعي ومخروطي للخلفيات والأزرار وأقسام البطل والتراكبات والمخططات. انسخ CSS أو Tailwind أو SCSS، أو صدّر PNG، في أي وقت تحتاجه. يعمل على iPhone وAndroid وWindows وMac بالتساوي.
Frequently asked questions
كيف أنشئ تدرجاً في CSS؟
اضبط خاصية background أو background-image على دالة تدرج. الأبسط هو تدرج خطي بلونين: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — يرسم مزجاً من اليسار إلى اليمين من اللون النيلي إلى الوردي. اختر ألوانك وزاويتك أعلاه، ثم انسخ سطر background الجاهز مباشرةً في ملف CSS الخاص بك. لا حاجة لكتابة الصياغة يدوياً — المنشئ يبنيها وأنت تسحب كل نقطة إلى مكانها.
ما الفرق بين التدرج الخطي والشعاعي والمخروطي؟
الـ linear-gradient يمزج الألوان على طول خط مستقيم بزاوية تختارها (مثلاً 90deg = من اليسار إلى اليمين). أما الـ radial-gradient فيمزج إلى الخارج من نقطة مركزية في دوائر أو قطوع ناقصة، كبقعة ضوء الكشاف. والـ conic-gradient يدور الألوان حول نقطة مركزية كعقارب الساعة، مما يجعله مثالياً لعجلات الألوان والمخططات الدائرية. تبني هذه الأداة الأنواع الثلاثة؛ بدّل بينها بأزرار خطي / شعاعي / مخروطي. معظم أدوات التدرج المجانية كمولّد خلفية Canva تقدم التدرجات الخطية فقط، وcssgradient.io لا تدعم التدرجات المخروطية إطلاقاً.
كيف أجعل خلفية متدرجة في CSS؟
طبّق التدرج على خاصية background لأي عنصر. لخلفية صفحة كاملة جرّب: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. لأن التدرج يُحسب كصورة، يمكنك أيضاً إضافة background-attachment: fixed; ليبقى ثابتاً أثناء تمرير الصفحة. ابنه بصرياً أعلاه وانسخ CSS الناتج. لا حاجة لـ Figma أو Canva أو أي أداة تصميم. يعمل بنفس الطريقة على جميع المتصفحات الحديثة بدون بادئات في عام 2026.
كيف أضيف أكثر من لونين إلى التدرج؟
أضف نقاط ألوان إضافية، لكل منها موضعها الخاص. انقر في أي مكان على شريط التدرج (أو زر + إضافة نقطة) لإسقاط نقطة جديدة، ثم اسحبها حيث تريد. ثلاثة ألوان تبدو هكذا: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). لا حد فعلي — أضف بقدر ما يحتاجه تصميمك. على خلاف coolors.co الذي يعرض لوحات الألوان فقط دون كود CSS فعلي، أو Canva الذي يقفل تحرير التدرجات خلف حساب، هذا المنشئ يولّد كود CSS للإنتاج بنقاط غير محدودة فوراً.
كيف أضبط زاوية التدرج أو اتجاهه؟
للتدرج الخطي، القيمة الأولى هي الزاوية: 0deg تشير لأعلى، 90deg تشير لليمين، 180deg تشير لأسفل، 270deg تشير لليسار. يمكنك أيضاً استخدام كلمات مفتاحية مثل 'to right' أو 'to bottom right'، لذا linear-gradient(to right, ...) مطابق تماماً لـ linear-gradient(90deg, ...). اسحب شريط تمرير الزاوية أو انقر سهم الاتجاه أعلاه وتتحدث القيمة فوراً. كود CSS الناتج يتحدث في الوقت الحقيقي فيمكنك النسخ واللصق مباشرةً في أي ملف CSS أو إطار عمل.
هل ما زلت بحاجة إلى بادئات -webkit- للتدرجات في 2026؟
في عام 2026، لا. linear-gradient وradial-gradient وconic-gradient مدعومة بدون بادئات في كل متصفح حديث، لذا يكفي background: linear-gradient(...) البسيط. ستضيف -webkit- فقط لـ Safari/iOS القديمة جداً (قبل 2017) أو Android WebView الموروثة. ضع علامة على 'إضافة بادئة -webkit-' في إخراج CSS وستُصدر الأداة سطر احتياطي محوّلاً بشكل صحيح فوق السطر القياسي. يتم التعامل مع تحويل الزاوية (90deg تصبح 270deg في نسخة webkit) تلقائياً.
كيف أنشئ تدرجاً في Tailwind CSS؟
استخدم أدوات التدرج: فئة اتجاه بالإضافة إلى ألوان from- وvia- وto-، مثلاً bg-gradient-to-r from-indigo-500 to-pink-500. للألوان الدقيقة استخدم القيم الاعتباطية: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. بدّل الإخراج إلى تبويب Tailwind لنسخ الفئات للتدرج الحالي، بما في ذلك قيمة bg-[linear-gradient(...)] الاعتباطية للتدرجات الشعاعية والمخروطية التي لا تملك Tailwind اختصاراً مسمىً لها. معظم موارد Tailwind للتدرجات لا تغطي هذه الحالة الطرفية.
كيف أصدّر التدرج كصورة PNG؟
انقر على تنزيل PNG. ترسم الأداة تدرجك الدقيق على لوحة HTML بدقة 1600x900 وتحفظه كـ .png، مثالي لخلفية شريحة عرض أو بانر للتواصل الاجتماعي أو نموذج تصميم. يُعالَج بالكامل في متصفحك، لذا لا شيء يُرفع. على خلاف TinyWow الذي يتطلب رفع الملف إلى خادم، أو Adobe Express الذي يضع تصدير PNG خلف جدار اشتراك مدفوع، لا يوجد خطر على الخصوصية ولا تكلفة هنا. تحتاج حجماً آخر؟ قُلِّص أو اقطع PNG في أي محرر صور بعد ذلك.
كيف أنشئ تدرجاً من صورة؟
انقر على 'من صورة' واختر صورة. تقرأ الأداة البكسلات محلياً، تجد الألوان الأكثر شيوعاً، وتبني منها تدرجاً — طريقة سريعة لمطابقة صورة علامة تجارية أو لقطة منتج. صورتك لا تغادر جهازك أبداً؛ تُحلَّل في المتصفح وتُهمَل فوراً. على خلاف Adobe Color أو Coolors اللذين يتطلبان رفعاً أو حساباً لاستخراج لوحات الألوان، كل شيء يبقى خاصاً على جهازك. يمكنك بعد ذلك تعديل النقاط المستخرجة، تغيير الزاوية، أو التبديل إلى شعاعي أو مخروطي.
ما هو التدرج المخروطي ومتى أستخدمه؟
التدرج المخروطي يدور ألوانه حول نقطة مركزية بدلاً من خط، فيكون الانتقال كعقرب ساعة. مثلاً conic-gradient(from 0deg, red, yellow, green, blue, red) يصنع عجلة ألوان كاملة. إنه مثالي للمخططات الدائرية وخرائط الدونات وحلقات التقدم ومنتقيات الألوان وتأثيرات الضوء الزاوية. دعم المتصفح كان ثابتاً منذ عام 2021 عبر Chrome وFirefox وSafari وEdge بدون بادئة. اختر مخروطي أعلاه، اضبط الزاوية الابتدائية وموضع المركز، وجرّب. معظم أدوات منشئ التدرج لا تدعم المخروطي إطلاقاً.
كيف أصنع تدرجاً سلساً أو شفافاً؟
أعط نقطة ما قيمة ألفا. اخفض شريط التمرير للشفافية على نقطة ما وسيتحول CSS إلى rgba(). مثلاً linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) يتلاشى من الشفاف إلى 60% أسود، وهو التأثير الكلاسيكي خلف النص على صورة. نصيحة: تلاشَ بين نفس اللون (شفاف إلى صلب بنفس التدرج اللوني) لتجنب نقطة وسط رمادية كئيبة تنتجها المتصفحات عند التلاشي بين لونين مختلفين شفافين تماماً. تتعامل الأداة مع إخراج rgba تلقائياً عند ضبط شفافية النقطة.
هل هذا المنشئ أفضل من cssgradient.io أو Colorzilla؟
منشئ التدرج في UtiloKit يغطي كل ما تقدمه تلك الأدوات — أنواع التدرج الخطي والشعاعي والمخروطي، محررات متعددة النقاط، نسخ الكود — بالإضافة إلى إخراج Tailwind CSS، وتنزيل PNG، واستخراج التدرج من صورة، وروابط قابلة للمشاركة، ودعم التدرج المتحرك. cssgradient.io يفتقر إلى دعم التدرج المخروطي وليس له إخراج Tailwind. محرر التدرج في Colorzilla هو امتداد متصفح ولا يصدّر PNG أو Tailwind. كل شيء هنا يعمل في متصفحك بدون رفع ولا تسجيل ولا إعلانات تحجب الميزات.
هل يمكنني استخدام منشئ التدرج هذا على iPhone أو Android؟
نعم. الأداة متجاوبة بالكامل وتعمل في أي متصفح موبايل حديث. افتحها في Safari على iPhone أو Chrome على Android، ابنِ تدرجك، وانسخ CSS مباشرةً إلى الحافظة. بما أن كل شيء يعمل من جانب العميل، لا يوجد تنزيل مطلوب وتعمل حتى على اتصالات الموبايل البطيئة بعد تحميل الصفحة. محرر النقاط القائم على السحب يتكيف مع اللمس، لذا إنشاء تدرجات متعددة النقاط على الهاتف أمر سهل.
Related tools
عرض كل الأدوات
جديد منشئ تأثير الزجاج Glassmorphism
صمّم بطاقة زجاجية ضبابية وانسخ شيفرة CSS، مع معاينة مباشرة.
جديد منشئ ظلال النص CSS
اضبط ظل نص CSS مع معاينة مباشرة وانسخ الشيفرة.
جديد خالط الألوان
امزج لونين بأي نسبة وانسخ النتيجة أو أي خطوة بينهما.
جديد منتقي ألوان الصور
اختر أي لون من صورة واستخرج لوحة ألوانها السائدة بصيغ HEX وRGB وHSL.
جديد Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
جديد Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.