Aller au contenu principal

    نحن نستخدم ملفات تعريف الارتباط

    نستخدم ملفات تعريف الارتباط لتحسين تجربتك. بمواصلة التصفح، فإنك توافق على استخدامها.

    اعرف المزيد في ملفات تعريف الارتباط و الخصوصية

    تدرج CSS

    أنشئ تدرجات CSS خطية وشعاعية. استخدم تدرج CSS مجاناً عبر الإنترنت دون تسجيل، مع نتائج سريعة ومعالجة آمنة داخل المتصفح.

    معاينة

    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

    الإعدادات

    %
    %

    يساعدك تدرج CSS على العمل بالألوان مباشرة داخل المتصفح.

    صُممت الأداة للمصممين والمطورين وصناع المحتوى الذين يحتاجون إلى نتائج سريعة وموثوقة.

    Supported formats

    CSS
    Tailwind
    SCSS
    Linear
    Radial
    Conic

    How it works

    1

    Step 1

    افتح تدرج CSS

    2

    Step 2

    أدخل الألوان أو استوردها

    3

    Step 3

    انسخ النتيجة أو صدّرها أو أعد استخدامها

    أخطاء شائعة يجب تجنبها

    • نسيان فحص التباين قد يضعف قابلية القراءة.
    • استخدام ألوان كثيرة قد يجعل اللوحة صعبة التطبيق.

    نصائح للمحترفين

    • احفظ الألوان الأساسية كمتغيرات CSS.
    • اختبر اللوحة في الوضعين الفاتح والداكن قبل النشر.

    Privacy guaranteed: everything is processed locally in your browser.

    تتم المعالجة محلياً داخل المتصفح كلما أمكن. لا حاجة إلى حساب.

    تدرج CSS لمشاريع الألوان

    أنشئ تدرجات CSS خطية وشعاعية.

    تدرج CSS دون فقدان الدقة

    تجري التحويلات بقيم دقيقة (HEX، RGB، HSL، OKLCH). بدون تقريب بصري — تحصل على اللون المطابق لقصد التصميم.

    تدرج CSS مجاناً عبر الإنترنت

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

    تدرج CSS بسرعة وأمان

    تتم المعالجة مباشرة داخل المتصفح لأقصى سرعة. لا تُرسل البيانات إلى خوادمنا، فألوانك وملفاتك تبقى خاصة على جهازك.

    تدرج CSS للمشاركة والتعاون

    صدّر النتائج بصيغة HEX، RGB، HSL، CSS، JSON أو انسخها بنقرة واحدة. مثالي لمشاركة دليل الألوان مع فريقك أو توثيق نظام التصميم.

    اكتشف جميع أدوات الألوان

    استخرج، حوّل، أنشئ لوحات ألوان وتدرجات وتباينات WCAG بنقرات قليلة.

    عرض كل الأدوات

    Related tools

    تدرج شبكي
    تدرج متحرك
    تأثير الزجاج
    ظلال ملونة

    أدلة ودروس

    تعلم كيفية استخدام أدواتنا من خلال أدلتنا المفصلة.

    css-gradient: دليل عملي حول gradients

    دليل مترجم لاستخدام css-gradient وفهم أفضل ممارسات gradients وتجنب الأخطاء الشائعة.

    css-gradient: دليل عملي حول gradients

    دليل مترجم لاستخدام css-gradient وفهم أفضل ممارسات gradients وتجنب الأخطاء الشائعة.

    css-gradient: دليل عملي حول gradients

    دليل مترجم لاستخدام css-gradient وفهم أفضل ممارسات gradients وتجنب الأخطاء الشائعة.

    Frequently asked questions

    نعم، الأداة متاحة مجاناً عبر الإنترنت.

    تتم المعالجة داخل المتصفح كلما أمكن لحماية بياناتك.