المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    مولد تدرجات CSS

    إنشاء تدرجات CSS جميلة مع معاينة

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    إعدادات التدرج

    نقاط توقف الألوان

    نقطة توقف اللون 1

    نقطة توقف اللون 2

    تدرجات جاهزة

    نصائح حول التدرجات

    استخدم التدرجات الخطية لانتقالات لونية سلسة في اتجاه معين.

    تناسب التدرجات الدائرية تأثيرات الإضاءة المركزة أو التركيز.

    التدرجات المخروطية مثالية لعجلات الألوان والأنماط الزاويّة.

    عدّل مواضع نقاط توقف الألوان للتحكم في توزيع ألوان التدرج.

    استخدم ألوانًا متقاربة في الدرجة للحصول على تدرجات هادئة، أو ألوانًا متباينة لتأثيرات جريئة.

    معاينة مباشرة

    اختصار CSS

    background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);

    خاصية CSS

    background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);

    فئة CSS

    .gradient-bg {
  background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}

    عدّل الألوان والمواضع. تتحدث المعاينة أثناء عملك.

    عن مولد تدرجات CSS

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

    سواء احتجت خلفية خفيفة بلونين أو تدرجًا معقدًا متعدد النقاط، تمنحك هذه الأداة ما يصل إلى 10 نقاط لونية مع تحكم دقيق في مواضعها. اختر من القوالب الجاهزة مثل Sunset وOcean وForest وPurple Rain، أو استخدم المولد العشوائي لاكتشاف توليفات ألوان تدرجات فريدة لتصاميمك.

    ينتج المولد فورًا شيفرة تدرج CSS نظيفة يمكنك نسخها بنقرة واحدة أو تنزيلها كصورة PNG. تتوفر عدة صيغ للناتج، منها الصيغة المختصرة background وخاصية background-image وفئة CSS جاهزة للاستخدام. وتتم كل المعالجة في متصفحك دون الحاجة إلى رفع أي شيء إلى الخادم.

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.