مولّد تدرجات CSS

يولّد تدرجات CSS للمصممين والمطورين، مما يتيح إنشاء تدرجات خطية أو شعاعية بسرعة مع ألوان ونقاط توقف قابلة للتحديد للخلفيات الإلكترونية.

Tool coming soon!

We're working hard to get this tool ready for you.

Request Feature / Support

1,292+

Total Calculations Run

< 15ms

Browser Execution Speed

100%

Client-Side Privacy

4.9 / 5.0

User Satisfaction

AI Web Tool Generator

Build Your Own Custom Web Calculator in Seconds

Type what tool or calculator you need below. Our AI will build it instantly for your site.

عن هذه الأداة

يُنشئ الأداة سلاسل CSS للتدرج بناءً على مدخلات المستخدم من خلال دمج نقاط اللون ونوع التدرج والزوايا في تعبير CSS واحد. من الناحية المفاهيمية، تُوضع نقاط اللون على طول محور التدرج وتتولّد من خلال دالة التدرج. هذا يمكّن المصممين من تجربة عائلات الألوان ونقاط الانتقال دون كتابة سلسلة يدوياً.
يستهدف المطورين الأماميين ومصممي واجهات المستخدم وفرق التسويق الذين يحتاجون تعاريف خلفية موثوقة وقابلة لإعادة الاستخدام للمواقع والمكوّنات. القيمة هنا في رمز جاهز للإنتاج مع تحقق من الصحة، بناء تركيبي متوافق مع الإصدارات السابقة ونسخ/minified أو نسخ Prefix لدعم أوسع.
الوظائف الأساسية تتضمن دعم التدرجات الخطية والشعاعية، ألوان بتنسيقات hex/rgb/hsl، مواقع توقف صريحة ومخرجات متوقعة لأنظمة الثيم. حالات الاستخدام تشمل أقسام hero، الأزرار، البطاقات وفواصل الأقسام حيث تكون الانتقالات اللونية مهمة.

Save your calculation history with a free account

كيفية الاستخدام

قدّم المدخلات: اختر نوع التدرج (خطّي أو شعاعي)، أضف توقف اللون مع الألوان ومواقع اختيارية.
اضبط التفاصيل: حدّد الزاوية لتدرجات الخطّ وترتيب الوقفات حسب الموقع.
أنشئ الكود: تقوّي الأداة تشكيل سلسلة CSS للتدرج والمتغيرات مع prefixes عند الحاجة.
راجع المخرجات: انسخ CSS القياسي أو المصغّر لورقة الأنماط.
التطبيق: الصق التدرج في background-image أو تصريحات الخلفية في CSS لديك.
التكرار: عدّل الألوان أو المواقع لتحسين النتيجة.

How to use online gradient generator css

Frequently Asked Questions

اعثر على إجابات سريعة

ما أنواع التدرج التي تولّدها الأداة وكيف يتم تمثيلها في CSS؟

تولّد الأداة تعبيرات linear-gradient وradial-gradient. يمكن تحديد زاوية وتتابع نقاط اللون لتدرجات خطية، وتعرّف التدرجات الشعاعية بواسطة شكل التركيز ونقاط اللون. الإخراج يتضمن بناءً قياسيًا وتحويرات مع بادئات المتصفح للتوافق.

أي تنسيقات قيم اللون تقبلها Stops؟

Stops تقبل تنسيقات ألوان CSS الشائعة، بما فيها hex (#RRGGBB أو #RGBA)، rgb/rgba() وhsl/hsla(). يقوم المولّد بالتحقق من صحة الألوان والتأكد من الهروب والتنسيق الصحيح داخل سلسلة التدرج.

هل يمكنني تصدير Variants مثل بادئات المتصفح أو كود مصغّر؟

نعم. يمكن للأداة إنتاج CSS القياسي وكذلك Variants مع بادئات المتصفح (مثال: -webkit-gradient أو -webkit-linear-gradient) كما يمكن تصدير نسخة مصغّرة.

ما هي المتطلبات الإدخالية لنقاط اللون؟

يتطلب التدرّج على الأقل نقطتي لون. كل نقطة يمكن أن تحتوي موقعًا بين 0 و100 في المئة. إذا كان موضع واحد مفقودًا، يوزّع الأداة النقاط بالتساوي من البداية للنهاية ويرتبها تصاعديًا لضمان تعريف gradient صحيح.

Need to run multiple calculations?

Create a free account today to unlock unlimited daily runs, access advanced parameters, save your history, and request custom features.

Related Tools

Other useful calculators and utilities you might like

محول Spotify إلى MP3

يحوّل ملفات الصوت المقدمة محليًا إلى MP3، مما يتيح الاستماع دون اتصال وتوافقًا عبر الأجهزة للموسيقى...

حساب المسافة بالطرق

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

حاسبة العمر

حدد عمر شخص بسرعة استناداً إلى تاريخ ميلاده مع أداتنا المجانية على الإنترنت، مناسبة للاستخدام الشخصي...

محول العملات

حوّل بسرعة مبالغ بين عملات مختلفة باستخدام محول العملات المجاني عبر الإنترنت، مثالي للمسافرين، الشرك...

ملاحظاتك تهمنا

ساعدنا على التحسن