مولد التدرج CSS
أنشئ تدرجات CSS خطية ودائرية.
نقاط اللون
0%
100%
الاتجاه
الزاوية90deg
مخرجات CSS
إعدادات سريعة
الأدوات الموصى بها
أدوات مختارة بعناية قد تجدها مفيدة
العمل مع تدرجات CSS
نظرة عامة
للابتعاد عن الخلفيات الصلبة، تدرجات CSS هي الأسهل. ثلاثة أنواع (`linear-gradient` و `radial-gradient` و `conic-gradient`)، كل منها يُنتج تأثيراً مختلفاً. هذا المولّد يحرّر بصرياً مواقع التوقفات والزاوية والشكل مع معاينة مباشرة. يدعم توقفات متعددة وشفافية وأنماط متكررة.
كيف يعمل
أضف/حرّك/احذف توقفات الألوان بالشرائط. الزاوية 0-360°، للشعاعي اختر المركز. الـ CSS المُنتَج يتضمن بدائل للمتصفحات القديمة. جاهز للصق.
متى تستخدمه
خلفيات أقسام البطل. تأثيرات 3D على الأزرار. عمق دقيق في البطاقات. عناصر نائبة للصور الشخصية (تدرج مخروطي قوس قزح). رسوم التحميل المتلألئة. تعبير ناعم عن ألوان العلامة.
الأسئلة الشائعة
تدرجات CSS أخف بكثير من الصور (بايتات مقابل مئات الكيلوبايت). انتبه لحمل GPU فقط أثناء الرسوم المتحركة.