مولد التدرج CSS

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

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

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

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

اختر نوع التدرج والزاوية أو الموضع.
إضافة أو تعديل التوقفات اللونية.
انسخ ملف CSS الذي تم إنشاؤه.

How this tool works

اختر نوع التدرج والزاوية أو الموضع.
إضافة أو تعديل التوقفات اللونية.
انسخ ملف CSS الذي تم إنشاؤه.

Recommended settings

استخدم الخيارات الافتراضية أولاً، ثم اضبطها إذا لزم الأمر

Supported formats

Text / on-page input

File size and limits

قد تبدو المعاينات المعقدة للغاية ومتعددة الطبقات أبطأ على الهواتف القديمة.

Privacy

تعمل مولدات الألوان وCSS بالكامل في متصفحك. لا تقوم المعاينات والتحويلات أبدًا بتحميل أنماطك.

Common use cases

استخدم CSS Gradient Generator متى شئت: أنشئ تدرجات خطية وشعاعية ومخروطية باستخدام المعاينة المباشرة وCSS الجاهزة للنسخ.

Troubleshooting

تبدو المعاينة مختلفة بعد اللصق

تحقق من وجود CSS منافس على صفحتك (إعادة التعيين، الألوان الموروثة). انسخ القاعدة التي تم إنشاؤها إلى ورقة أنماط معزولة أولاً.

الأسئلة الشائعة

هل يؤدي هذا إلى تحميل CSS الخاص بي؟

لا. يتم تشغيل المولدات والمحولات في متصفحك من خلال المعاينة المباشرة.

هل أحتاج إلى حساب؟

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