مُحَرِّر تدرج خطي CSS أنشئ تدرجات خطية CSS مع ألوان مخصصة وزاوية ووقف الألوان.
مُحَرِّر تدرج خطي
أنشئ تدرجات خطية CSS مع ألوان مخصصة وزاوية ووقف الألوان.
تحديد الألوان
اختر ألوان البداية والنهاية، بالإضافة إلى محطة لون وسيطة اختيارية.
تعديل الزاوية
حدد اتجاه التدرج من 0° إلى 360°.
نسخ CSS
انسخ رمز CSS المولَّد لدوال linear-gradient() لمشروعك.
What Is مُحَرِّر تدرج خطي?
مُحَرِّر تدرج خطي يخلق انتقالات لونية ناعمة على طول خط مستقيم، مما ينتج عنه رمز CSS linear-gradient() للاستخدام المباشر في مشاريع الويب. يمكنك تحديد لون البداية، ولون النهاية، وزاوية التدرج، وإضافة محطات لونية متوسطة متعددة مع التحكم الدقيق بموقع كل منها. التدرجات الخطية هي واحدة من أكثر الميزات المتعددة الاستخدامات في CSS، وتُستخدم للخلفيات والطبقات العلوية وأffects النصوص والعناصر الزخرفية. يوفر هذا الأداة معاينة مرئية حية للتدرج الخاص بك إلى جانب رمز CSS جاهز للنسخ. واجهة المستخدم التفاعلية تسمح لك بتجربة مجموعات ألوان مختلفة واتجاهات ومواقع توقف لإنشاء كل شيء من تحولات لونية ثنائية خفيفة إلى انتقالات متعددة الألوان معقدة.
Why Use مُحَرِّر تدرج خطي?
-
معاينة مرئية في الوقت الفعلي عند تعديل الألوان والزاوية
-
إضافة محطات ألوان وسيطة غير محدودة مع التحكم في الموقع
-
التحكم الكامل في الزاوية 360° لأي اتجاه تدرجي
-
ينتج رمز CSS نظيف وجاهز للإنتاج
-
يمكن إزالة محطات الألوان بسهولة للتجربة السريعة
Common Use Cases
خلفيات الهيرو
أنشئ خلفيات تدرجية ملفتة للانتباه لقطاعات الهيرو وصفحات الارتباط.
أسلوب الأزرار
صمم أزرار التدرج التي تبرز بانتقالات ألوان ناعمة.
تأثيرات الطبقات العلوية
طبق التدرجات فوق الصور لقراءة النص أو للتأثير الفني.
منفصلات القسم
استخدم تدرجات خفيفة لفصل أقسام الصفحة ب-visually دون خطوط صلبة.
Technical Guide
يخلق CSS linear-gradient() انتقالًا لونيًا على طول خط محدد بزاوية. بناء الجملة هو: linear-gradient(زاوية، لون1 موقع1، لون2 موقع2، ...). تُحدد الزاوية بالدرجات (0 درجة = من الأسفل إلى الأعلى، 90 درجة = من اليسار إلى اليمين) أو الكلمات الرئيسية (إلى اليمين، إلى أسفل 왼쪽). تحدد محطات الألوان حيث يتم وضع كل لون على طول خط التدرج كنسبة مئوية (0٪ = البداية، 100٪ = النهاية). يقوم المتصفح بتحويل الألوان بين المحطات باستخدام مساحة الألوان sRGB. تُنشئ عدة محطات في نفس الموقع انتقالات لونية قاسية. يمكن للتدرجات استخدام أي تنسيق ألوني CSS (سداسي، rgb، hsl، أسماء الألوان) ودعم الشفافية عبر rgba/hsla. يدعم جميع المتصفحات الحديثة linear-gradient() بدون بادئة البائع. لأداء أفضل، يتم تحرير تدرجات CSS بواسطة وحدة معالجة الرسومات وتكون أكثر كفاءة من صور التدرج.
Tips & Best Practices
-
1استخدم 90° للتدرجات الأفقية من اليسار إلى اليمين و180° للرأسية من أعلى إلى أسفل
-
2أضف محطة لون عند 50% لإنشاء نقطة واضحة في التدرج
-
3استخدم ألوانًا شبه شفافة (rgba) لتدرجات الطبقات العلوية على الصور
-
4تؤدي عدة توقفات عند نفس الموقع إلى إنشاء حلقات لونية صلبة بدلاً من انتقالات ناعمة
-
5التدرجات الخفيفة (الألوان المماثلة) غالبًا ما تبدو أكثر احترافية من الدرامية
Related Tools
محدد اللون
محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.
🎨 Color Tools
مُحَرِّر تدرج شعاعي
أنشئ تدرجات شعاعية في CSS مع شكل ومركز ولون مخصصين.
🎨 Color Tools
مُحول تدرج مخروطي
أنشئ تدرجات مخروطية CSS لرسوم البيان الدائري وتدرجات الألوان والآثار المتحركة.
🎨 Color Tools
مخلوط الألوان
اخلط لونين معًا بنسبة قابلة للتعديل وشاهد التدرج الكامل.
🎨 Color Tools
مُحول تأثيرات الفلتر في CSS
تطبيق تأثيرات فلتر CSS مثل التعتيم، سطوع، تباين، وغيرها مع عناصر تحكم بصرية.
🎨 CSS & DesignFrequently Asked Questions
Q ما هو تدرج CSS الخطي?
Q هل يمكنني استخدام أكثر من لونين?
Q كيف تعمل الزاوية?
Q هل تعمل تدرجات CSS في جميع المتصفحات?
About This Tool
مُحَرِّر تدرج خطي is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.