مولد تدرجات CSS
أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
ما هو تدرج CSS؟
تدرج CSS هو قيمة صورة CSS تعرض انتقالات سلسة بين لونين أو أكثر دون استخدام ملفات الصور. يتم عرض التدرجات بواسطة المتصفح، مما يجعلها مستقلة عن الدقة وعالية الأداء.
ما أنواع تدرجات CSS المدعومة؟
يدعم هذا المولد ثلاثة أنواع: linear-gradient (ألوان على طول خط مستقيم)، radial-gradient (ألوان تشع من المركز)، و conic-gradient (ألوان تدور حول نقطة مركزية كوجه الساعة).
ما الفرق بين التدرج الخطي والشعاعي؟
تنتقل التدرجات الخطية على طول خط مستقيم محدد بزاوية أو كلمة اتجاه. تنتقل التدرجات الشعاعية للخارج من نقطة مركزية في أشكال دائرية أو بيضاوية.
كم نقطة لون يمكنني استخدامها؟
يمكنك استخدام أي عدد من نقاط اللون حسب الحاجة. تحدد كل نقطة لونًا واختياريًا موضعًا (0% إلى 100%) على طول خط التدرج. تخلق نقاط متعددة انتقالات معقدة.
كيف أستخدم كود CSS المُنشأ؟
انسخ كود CSS المُنشأ والصقه كقيمة لخاصية background أو background-image في ورقة أنماط CSS. يعمل الكود في جميع المتصفحات الحديثة.
ما هي نقاط اللون في التدرجات؟
تحدد نقاط اللون ألوانًا محددة في مواضع على طول خط التدرج. مثلاً "red 0%, blue 50%, green 100%" ينشئ تدرجًا يبدأ بالأحمر ويتحول للأزرق في المنتصف وينتهي بالأخضر.
هل يمكنني إنشاء تدرجات بزاوية؟
نعم، تدعم التدرجات الخطية قيم زاوية من 0deg إلى 360deg. يمكنك أيضًا استخدام كلمات اتجاه مثل "to right" و "to bottom" و "to top left".
هل تدرجات CSS متجاوبة؟
نعم، تدرجات CSS متجاوبة بطبيعتها لأنها متجهية ويتم عرضها بواسطة المتصفح. تتوسع بشكل مثالي لأي حجم حاوية دون فقدان الجودة أو زيادة حجم الملف.
هل تؤثر تدرجات CSS على أداء الصفحة؟
تدرجات CSS عالية الأداء بشكل عام. تلغي طلبات HTTP لملفات الصور ويتم تسريعها بالأجهزة. لكن التدرجات المعقدة جدًا قد تؤثر على الأداء في الأجهزة المنخفضة.
هل يمكنني استخدام التدرجات في الخلفيات والحدود؟
نعم، يمكن استخدام التدرجات لـ background-image و border-image و mask-image وأي خاصية تقبل قيم صور CSS.
ما المتصفحات التي تدعم تدرجات CSS؟
جميع المتصفحات الحديثة تدعم تدرجات CSS بما فيها Chrome و Firefox و Safari و Edge و Opera. الدعم ممتاز منذ IE10 ولم تعد البادئات ضرورية.
كيف أنشئ تدرجًا متكررًا؟
استخدم repeating-linear-gradient أو repeating-radial-gradient بدلاً من الإصدارات القياسية. تكرر هذه الأنماط نمط التدرج لملء العنصر بأكمله.
هل يمكنني تحريك تدرجات CSS؟
لا يمكن تحريك تدرجات CSS مباشرة مع انتقالات CSS. لكن يمكنك تحريك background-position أو background-size أو استخدام خصائص CSS المخصصة مع @property.
هل مولد التدرجات هذا مجاني؟
نعم، مولد تدرجات CSS هذا مجاني تمامًا. لا يتطلب تسجيلًا ولا توجد حدود استخدام وجميع الأكواد المُنشأة ملكك لاستخدامها في أي مشروع.
كيفية استخدام مولد تدرجات CSS
أنشئ تدرجات CSS بصريًا وانسخ فورًا كودًا جاهزًا للإنتاج. تتم المعالجة محليًا في متصفحك دون أي رفع للبيانات.
- اختر Type للتدرج: linear-gradient أو radial-gradient.
- عيّن Angle للتدرجات الخطية، أو اختر Shape مثل circle أو ellipse للتدرجات الشعاعية.
- أضف نقاط الألوان وغيّر ألوانها واسحبها في قسم Color Stops.
- انقر أي عيّنة ضمن Presets لتبدأ من تدرج جاهز.
- انسخ كود CSS الناتج والصقه في ورقة الأنماط.
ضع نقطتي لون مختلف في نفس الموضع للحصول على حافة حادة — طريقة سريعة لصنع خطوط أو خلفيات مخططة دون صور.
أدوات ذات صلة
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد Border Radius CSS مولد border-radius CSS مرئي. اضبط كل زاوية بشكل مستقل مع معاينة فورية وانسخ كود CSS مباشرة.
- مولد CSS Grid مولد CSS Grid مرئي مجاني مع معاينة مباشرة. صمم تخطيطات شبكية متجاوبة بشكل تفاعلي وصدّر كود CSS جاهز للإنتاج فوراً.
- مولد CSS Flexbox مولد CSS Flexbox مرئي مع معاينة مباشرة. اضبط خصائص flex واحصل على كود CSS جاهز للاستخدام.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.