تصميم تدرجات جميلة وتصديرها بتنسيق CSS أو صور
اختر الألوان، وأضف نقاط التوقف، واضبط الزاوية أو النقطة المركزية لإنشاء التدرج الدقيق الذي تحتاجه. تدعم الأداة التدرجات الخطية والشعاعية والمخروطية مع توقفات لونية غير محدودة. انسخ كود CSS لورقة الأنماط الخاصة بك أو قم بتنزيل التدرج بتنسيق PNG عالي الدقة لاستخدامه في مشاريع التصميم.
استخدم هذه الأداة مجانًاBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
كيفية الاستخدام
اختر نوع التدرج
حدد خطيًا أو شعاعيًا أو مخروطيًا. بالنسبة للخطي، قم بتعيين الزاوية؛ لشعاعي، تعيين نقطة المركز والشكل.
إضافة وضبط الألوان
انقر فوق شريط التدرج لإضافة توقفات الألوان. اسحب لتغيير الموضع، وانقر نقرًا مزدوجًا لتغيير اللون، واضبط العتامة لكل نقطة توقف.
انسخ CSS أو قم بتنزيله
انسخ رمز CSS الذي تم إنشاؤه لاستخدامه على الويب، أو قم بتعيين الدقة وتنزيل التدرج كصورة PNG.
سمات
ثلاثة أنواع التدرج
قم بإنشاء تدرجات خطية بأي زاوية، أو تدرجات نصف قطرية مع مركز وشكل قابلين للتعديل، أو تدرجات مخروطية تدور حول نقطة ما. قم بالتبديل بين الأنواع وتحديثات المعاينة على الفور.
توقف اللون غير محدود
قم بإضافة أي عدد تريده من التوقفات اللونية على طول شريط التدرج. قم بسحب علامات التوقف لتغيير موضعها، أو انقر نقرًا مزدوجًا لتغيير اللون، أو انقر بزر الماوس الأيمن لحذفها. تدعم كل نقطة توقف العتامة للتدرجات شبه الشفافة.
إخراج كود CSS
تقوم الأداة بإنشاء رمز صورة خلفية CSS صالح مع بادئات البائع. انسخ الكود والصقه مباشرة في ورقة الأنماط الخاصة بك. يتم تحديث الإخراج في الوقت الحقيقي أثناء قيامك بتحرير التدرج.
تصدير الصور بصيغة PNG
قم بتنزيل التدرج بتنسيق PNG بأي دقة - بدءًا من الصور المصغرة بحجم 100 بكسل إلى لافتات بحجم 4000 بكسل. استخدم الصورة كخلفية أو تراكب أو عنصر تصميم في الأدوات التي لا تدعم تدرجات CSS.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai Enhanceتحديد
| أنواع التدرج | خطي، شعاعي، مخروطي |
| توقف اللون | غير محدود |
| نطاق الزاوية | 0-360 درجة |
| إخراج CSS | القياسية + بادئات البائع |
| تصدير PNG | ما يصل إلى 4000 × 4000 بكسل |
| يعالج | جانب العميل (فوري) |
Related Magic Eraser Tools
الأسئلة الشائعة
هل يمكنني إنشاء تدرج مع الشفافية؟
+
نعم. تحتوي كل نقطة توقف لونية على شريط تمرير العتامة. اضبط العتامة على أقل من 100% لإنشاء مناطق شبه شفافة في التدرج. يستخدم مخرجات CSS قيم rgba ويحتفظ تصدير PNG بقناة ألفا.
ما هو التدرج المخروطي؟
+
يشع التدرج المخروطي توقفات اللون حول نقطة مركزية، مثل حركة عقرب الساعة. وهو مفيد لتأثيرات نمط المخطط الدائري وعجلات الألوان والخلفيات الزخرفية. دعم المتصفح ممتاز في المتصفحات الحديثة.
هل يمكنني استخدام CSS الذي تم إنشاؤه في أي إطار؟
+
نعم. الإخراج هو CSS قياسي يعمل في HTML عادي، وReact، وVue، وTailwind، وأي إطار عمل آخر يدعم CSS المضمّن أو المستند إلى ورقة الأنماط.
هل تحتاج إلى التدرج اللوني على الصورة؟
يمكن لـ AI Enhance ضبط درجة الألوان والإضاءة في صورك، وتتيح لك أداة تراكب الصور لدينا مزج التدرج اللوني أعلى أي صورة للحصول على مظهر مصقول.
جربه مجاناMore free tools
Explore our other limited free edits after sign-in photo and image tools.
تحويل الألوان بين التنسيقات المسماة HEX وRGB وHSL وHSB وCMYK وCSS. شاهد معاينة مباشرة، وانسخ أي قيمة، وقم بتصدير بطاقة الألوان. لا حاجة للتسجيل.
قم بتحويل رموز الألوان HEX إلى قيم RGB والعكس. المعاينة المباشرة والنسخ بنقرة واحدة وإخراج مقتطف CSS. لا حاجة للتسجيل — يعمل في متصفحك.
اختر أي لون من الصورة التي تم تحميلها واحصل على رموز HEX وRGB وHSL الخاصة بها على الفور. أنشئ لوحات من الصور لتصميم الويب والعلامات التجارية والتوضيح.
قم بتحميل صورة واستخرج 5-10 ألوان سائدة باستخدام رموز HEX وRGB وHSL. انسخ العينات، وقم بالتصدير كمتغيرات ASE أو CSS. لا حاجة للتسجيل.
قم بإنشاء رموز QR لعناوين URL والنصوص وبيانات اعتماد WiFi وvCards. قم بتخصيص الألوان وإضافة شعار مركزي وتنزيله بتنسيق PNG أو SVG. لا حاجة للتسجيل.
حساب العرض أو الارتفاع أو نسبة العرض إلى الارتفاع للصور والفيديو. أدخل أي قيمتين واحصل على الثالثة. نسب محددة مسبقًا لوسائل التواصل الاجتماعي والأفلام والطباعة. لا حاجة للتسجيل.