Utiliome

مولد تدرجات CSS

أنشئ وخصص تدرجات CSS خطية ودائرية ومخروطية بصرياً. انسخ كود CSS متوافق مع جميع المتصفحات فوراً. مجاني 100%.

Settings

135°
0%
100%
Standard CSS
background: #8B5CF6; background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
Tailwind CSS (v3/v4 Arbitrary)
bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]

أدوات ذات صلة

أدوات قد تحتاجها أيضاً

مولد لوحة الألوان

إنشاء وتعديل وتصدير لوحات ألوان وتدرجات رائعة لمشروع واجهة المستخدم القادم.

مولد تأثير Glassmorphism

إنشاء تأثيرات الزجاج الضبابي الحديثة. اضبط الضبابية والشفافية للـ CSS.

استخراج لوحة الألوان

رفع صورة لاستخراج لوحة ألوانها فوراً.

مستخرج اللون السائد

رفع صورة لاستخراج ألوانها السائدة فوراً.

مولد أيكونات Favicon

إنشاء أيقونات Favicon قياسية وعالية الدقة لمشاريع الويب بسهولة.

مولد صور ICO

تحويل الصور إلى صيغة ICO لأيقونات Windows وأيقونات Favicon.

خصوصية 100% • بدون رفع ملفات للسيرفر

لماذا تستخدم أداة مولد تدرجات CSS المجانية من Utiliome؟

تم بناؤها لضمان الخصوصية التامة والتنفيذ الفوري دون تعقيد. لا اشتراكات ولا قيود أو تسجيل حساب.

لوحة تدرجات بصرية

أضف وأزل واسحب نقاط الألوان عبر شريط زمني بصري لدمج التدرجات متعددة الألوان بدقة.

أنواع تدرجات متعددة

تنقل بسلاسة بين أوضاع تدرجات CSS الخطية (اتجاهية)، والدائرية (دائرية)، والمخروطية (شاملة).

تصدير CSS فوري

يولد تلقائياً كود CSS متوافق مع جميع المتصفحات، بما في ذلك بادئات البائعين لدعم أقصى.

تنفيذ محلي 100%

مصنوع بالكامل باستخدام JavaScript من جانب العميل. لا بطء في السيرفر، لا انتظار، فقط استجابة بصرية فورية.

Utiliome مقابل البدائل السحابية التقليدية

قارن محركنا المحلي القائم على WebAssembly مقابل الأدوات السحابية القديمة.

الميزة Utiliome (متصفح محلي) محولات السحابة القديمة
أنواع التدرجات خطية، دائرية، مخروطية عادة خطية فقط
مخرجات الكود CSS نقي وفئات Tailwind يوفر CSS أساسي فقط
الأداء HTML5 Canvas بدون تأخير إعادة رسم بطيئة لـ DOM
التكلفة مجاني 100% مدى الحياة ميزات مدفوعة خل جدران حظر الدفع

كيفية استخدام مولد تدرجات CSS في 3 خطوات بسيطة

لا داعي لتثبيت أي برامج. يعمل كل شيء مباشرة داخل متصفح الإنترنت الخاص بك.

1

حدد الألوان

انقر على نقاط الألوان عبر الشريط الزمني لاختيار أكواد HEX للبداية والنهاية.

2

عدل الاتجاه

استخدم قرص الزاوية لتدوير التدرج الخطي، أو انتقل إلى الوضع الدائري لتأثير من المنتصف إلى الخارجي.

3

انسخ الـ CSS

انقر على زر النسخ للحصول على كود CSS المنسق بالكامل لخاصية 'background-image' لورقة الأنماط الخاصة بك.

لماذا نستخدم تدرجات CSS بدلاً من صور الخلفية؟

إجابة سريعة: يتم إنشاء تدرجات CSS رياضياً بواسطة المتصفح، مما يعني أنها لا تتطلب أي طلبات شبكة HTTP، وتتوسع بشكل مثالي دون تشوه الأشكال على شاشات Retina، وحجم ملفها لا يتعدى بضعة بايتات من النص.

قبل عقد من الزمان، كان مصممو الويب ينشئون خلفيات تدرج جميلة في Photoshop، ويقعونها إلى صور JPG ضخمة، ويضبطونها كأنماط خلفية مكررة. كان هذا سيئاً لـ SEO، ودمّر سرعة تحميل الصفحة، وبدا مشهاً للغاية على شاشات 4K الحديثة.

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

التدرجات الخطية مقابل الدائرية مقابل المخروطية

إجابة سريعة: تدمج التدرجات الخطية الألوان على طول خط مستقيم (مثل من الأعلى إلى الأسفل). تنبعث التدرجات الدائرية للخارج من نقطة مركزية كالدائرة. بينما تدور التدرجات المخروطية حول محور مركزي كالمخطط الدائري أو عجلة الألوان.

فهم أنواع تدرجات CSS الثلاثة الأساسية يتيح مرونة إبداعية هائلة:

  • التدرجات الخطية: النوع الأكثر شيوعاً. تقوم بتحديد زاوية (مثل 45deg أو to right bottom) وتنتقل الألوان بسلاسة عبر هذا المحور.
  • التدرجات الدائرية: تنشئ هذه التأثيرات انفجاراً دائرياً أ بيضاوياً. مثالية لإبراز عنصر مركزي في الصفحة أو إنشاء ظلال كروية ثلاثية الأبعاد واقعية.
  • التدرجات المخروطية: أحدث إضافة إلى مواصفات CSS. بدلاً من الانتقال إلى الخارج، تنتقل الألوان حول نقطة مركزية (من 0 إلى 360 درجة). إنها مفيدة للغاية لإنشاء مخططات دائري بـ CSS نقي ورسوم تحميل دوارة.

فهم نقاط الألوان (Color Stops) في CSS

إجابة سريعة: تحدد نقاط الألوان بالضبط أين على خط التدرج يجب أن يصل لون معين إلى أقصى كثافة له. من خلال إضافة نقاط ألوان متعددة (مثل red 0%, yellow 50%, blue 100%)، يمكنك إنشاء خلفيات معقدة متعددة النطاقات.

يحتاج التدرج الأساسي فقط إلى لونين: بداية ونهاية. لك Utiliome يتيح لك إضافة نقاط ألوان غير محدودة على طول الشريط الزمني.

على سبيل المثال، إذا كتبت linear-gradient(to right, red 0%, green 50%, blue 100%)، سينتقل المتصفح بسلاسة من الأحمر إلى الأخضر بحلول منتصف الشاشة، ثم من الأخضر إلى الأزرق في النهاية.

يمكنك أيضاً إنشاء "نقاط قاطعة" (خطوط حادة بدلاً من مزيج سلس) عن طريق تعيين لونين مختلفين لنفس النسبة المئوية بالضبط (مثل red 50%, blue 50%). هذه التقنية هي كيفية إنشاء المطورين لأنماط الخطوط والأعلام بـ CSS نقي.

كيفية إنشاء تدرجات نصوص باستخدام CSS

إجابة سريعة: يمكنك تطبيق التدرجات مباشرة على الخطوط باستخدام خاصيتي 'background-clip: text' و '-webkit-text-fill-color: transparent'، مما يقص خلفية التدرج خصيصاً على شكل الخط.

أحد أكثر اتجاهات تصميم الويب الحديثة شعبية هو تطبيق تدرجات حيوية على النصوص الكبيرة، وتستخدم عادة في عناوين H1 الرئيسية (التي اشتهرت بها Apple و Stripe).

للقيام بذلك، تقوم بإنشاء تدرج قياسي باستخدام Utiliome، ولكن تطبقه بثلاث قواعد CSS محددة:

  1. طبق التدرج على العنصر: background-image: linear-gradient(...);
  2. اقص الخلفية على النص: -webkit-background-clip: text; background-clip: text;
  3. اجعل الخط الأصلي شفافاً حتى تظهر الخلفية من خلاله: -webkit-text-fill-color: transparent;

هذا يضمن بقاء النص قابلاً للتحديد وموافقاً لـ SEO بالكامل، مع الظهور بمظهر مذهل بصرياً.

التوافق عبر المتصفحات وبادئات البائعين

إجابة سريعة: بينما تدعم المتصفحات الحديثة التدرجات بشكل أصلي، تطلبت المتصفحات القديمة (مثل الإصدارات القديمة من Safari و Internet Explorer) بادئات بائعين محددة مثل '-webkit-' و '-moz-' لتحليل CSS بشكل صحيح.

تاريخياً، كانت كتابة تدرجات CSS كابوساً لأن مواصفات التنسيق تغيرت عدة مرات. كان على المطورين كتابة خمسة أسطر مختلفة من الكود لمجرد عرض تدرج على Firefox و Safari و Chrome.

اليوم، تم اعتماد صيغة linear-gradient() القياسية عالمياً. ومع ذلك، لضمان أقصى درجات الأمان لتطبيقات المؤسسات التي تدعم الأجهزة المحمولة القديمة، يمكن لمولد Utiliome إدراج بادئات -webkit- البديلة اللازمة تلقائياً في الكود المصدر.

إنشاء فئات تدرج Tailwind CSS

إجابة سريعة: حتوي Tailwind CSS على فئات مرافق مدمجة للتدرجات (مثل 'bg-gradient-to-r from-cyan-500 to-blue-500'). يتيح لك Utiliome تصميم تدرج بصرياً وصديره فوراً كـ سلسلة فئات Tailwind.

إذا كنت تطور تطبيق React أو Next.js باستخدام Tailwind CSS، فإن كتابة سمات style مخصصة باستخدام CSS النقي تكسر سير عمل المرافق أولاً (utility-first).

يسر Utiliome هذه الفجوة. بمجرد الانتهاء من التدرج الخاص بك على اللوحة البصرية، ببساطة حدد خيار تصدير Tailwind. يقوم المحرك برسم أكواد HEX المخصصة إلى قيم Tailwind عشوائية (مثل from-[#ff0000] via-[#00ff00] to-[#0000ff]) مما يعطيك سلسلة فئات منسقة بثبات يمكنك لصقها مباشرة في مكونات JSX الخاصة بك.

الأسئلة الشائعة والدليل الفني لـ مولد تدرجات CSS

كل ما تحتاج معرفته حول استخدام مولد تدرجات css مجاني عبر الانترنت المجاني عبر الإنترنت من Utiliome.

كيف أقوم بعمل تأثير نص متدرج في CSS؟

قم بإنشاء التدرج الخاص بك، ثم أضف خصائص CSS: 'background-clip: text;' و '-webkit-text-fill-color: transparent;' لقص التدرج خصيصاً على خطك.

ما هو التدرج المخروطي (Conic Gradient)؟

يمسح التدرج المخروطي الألوان حول محور مركزي (مثل مسح الرادار أو المخطط الدائري) بدلاً من الانتقال في خط مستقيم.

هل يمكنني تصدير التدرج الخاص بي إلى Tailwind CSS؟

نعم. يتضمن مصدر Utiliome تبويب Tailwind يولد فئات المرافق الدقيقة (مثل bg-gradient-to-r from-red-500) المطلوبة لمشاريع React/Next.js.

هل تدرجات CSS سيئة لأداء الموقع؟

لا. يتم تقديم تدرجات CSS رياضياً بواسطة معالج الرسوميات GPU. فهي متفوقة بكثير على استخدام صور الخلفية، ولا تتطلب أي طلبات شبكة وتستهلك بايتات فقط.

هل مولد CSS هذا مجاني بالكامل؟

نعم، مجاني 100% بدون قيود أو إعلانات أو تسجيل حساب مطلوب.