مولد تدرج CSS
مولد تدرجات CSS مرئي ومجاني عبر الإنترنت: صمم تدرجات خطية وشعاعية ومخروطية، وأضف نقاط ألوان متعددة، واضبط الزاوية، ثم انسخ كود CSS الجاهز لخلفيات موقعك.
نقطة لون
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);تضمين
آخر تحديث: 2026 · أداة مجانية عبر الإنترنت
ما هو مولد تدرج CSS؟
مولد تدرجات CSS مرئي ومجاني عبر الإنترنت: صمم تدرجات خطية وشعاعية ومخروطية، وأضف نقاط ألوان متعددة، واضبط الزاوية، ثم انسخ كود CSS الجاهز لخلفيات موقعك.
كيفية الاستخدام
- 1اختيار النوع— اختر نوع التدرج (خطي، شعاعي، مخروطي).
- 2ضبط نقاط التوقف اللونية— اضبط لون وموضع كل نقطة توقف لونية.
- 3معاينة— تحقق من النتيجة في الوقت الفعلي في المعاينة.
- 4نسخ كود CSS— انسخ كود CSS إلى الحافظة باستخدام زر 'نسخ'.
أدوات ذات صلة
مولد ظل CSS box-shadowمولّد box-shadow في CSS بضوابط للإزاحة والتمويه والانتشار واللون وinset مع معاينة حية للظل. انسخ شيفرة CSS الجاهزة لأي عنصر، مجانًا داخل المتصفح.
مولد CSS border-radiusمولّد border-radius في CSS بثمانية مقابض زوايا مستقلة وأشرطة تمرير ومعاينة حية للشكل المدور. انسخ شيفرة CSS الجاهزة لأي عنصر، مجانًا داخل المتصفح.
محوّل أكواد الألوانمحول ألوان مجاني عبر الإنترنت يترجم فورًا بين أكواد HEX وRGB وHSL وOKLCH ويحسب نسبة تباين WCAG بين لونين.
مولد موجات SVGمولّد موجات SVG مجاني عبر الإنترنت مع محرر مرئي لأشكال موجية ناعمة. اضبط السعة والألوان والطبقات وطبّق إعدادات جاهزة ثم انسخ كود CSS وSVG لاستخدامه كخلفيات وفواصل للأقسام.
الأسئلة الشائعة
لا يوجد حد، لكن 2-6 هو المعتاد. الكثير قد يؤثر على الأداء.
نعم. قم بتفعيل مربع اختيار 'تكرار' لإضافة بادئة repeating.
يتم توفير خمسة إعدادات مسبقة: Sunset و Ocean و Forest و Midnight و Rainbow.
حالياً يتم إنتاج CSS نقي فقط. تحويل Tailwind مخطط له في تحديث مستقبلي.
لا. تتم جميع العمليات في المتصفح.