مولّد تدرجات CSS مجاني عبر الإنترنت

أنشئ تدرجات خطية أو شعاعية أو مخروطية بمحطتي ألوان إلى ست محطات. عاين النتيجة مباشرة، واضبط الاتجاه أو نقطة الأصل ذات الصلة، وانسخ CSS جاهزًا للاستخدام دون تسجيل الدخول.

مساحة عمل CSS تفاعلية

أنشئ التدرج

نوع التدرج

زاوية الاتجاه135deg

deg

محطات الألوان

من محطتين إلى ست محطات، مرتبة بحسب الموضع.

المحطة 1

المحطة 2

المحطة 3

إعدادات مسبقة

معاينة مباشرة

خطي

مخرجات CSS

.gradient-background {
  background-color: #0F766E;
  background-image: linear-gradient(135deg, #0F766E 0%, #F59E0B 52%, #172033 100%);
}

تستخدم المعاينة وإجراعا النسخ القيمة نفسها للتدرج المُنشأ.

كيفية إنشاء تدرج CSS

الخطوة 1

اختر نوع التدرج

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

الخطوة 2

حرّر الألوان والمحطات والاتجاه

أدخل ألوان HEX صالحة، وضع كل محطة، واضبط الزاوية أو الشكل أو الأصل المعروض للنوع المختار.

الخطوة 3

عاين CSS وانسخه

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

اختر نوع تدرج CSS المناسب

تصف دوال تدرج CSS الثلاث مسارات مختلفة عبر محطات الألوان المرتبة نفسها. ابدأ بالهندسة التي تناسب السطح المقصود.

تتبع التدرجات الخطية محورًا

يتحرك التدرج الخطي على امتداد خط مستقيم. في CSS، تشير 0deg إلى الأعلى وتدور الزوايا المتزايدة مع عقارب الساعة، لذا تشير 90deg إلى اليمين و180deg إلى الأسفل.

تتمدد التدرجات الشعاعية من أصل

ينمو التدرج الشعاعي إلى الخارج كدائرة أو قطع ناقص. حرّك أصله لوضع إضاءة قرب المركز أو حافة أو زاوية.

تدور التدرجات المخروطية حول نقطة

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

تحكم بمحطات الألوان والمواضع والاتجاه

تثبت محطات الألوان الألوان عند نقاط دقيقة. ويحدد ترتيبها وتباعدها مكان بدء كل انتقال أو تسارعه أو زيادة تركيزه.

استخدم لونَي HEX معتمين إلى ستة ألوان

اكتب #RGB أو #RRGGBB، أو استخدم منتقي الألوان الأصلي. لا تحل مسودة غير صالحة محل آخر لون صالح مستخدم في المعاينة.

أبقِ مواضع المحطات قابلة للتوقع

تبقى المحطات بترتيب تصاعدي من 0% إلى 100%. قرّب المحطات المتجاورة لانتقال أسرع أو أبعدها لمزج أطول.

استخدم الإعدادات المسبقة كنقاط بداية

يبقى كل إعداد مسبق قابلاً للتحرير. اعكس ترتيب الألوان أو أنشئ ألوانًا جديدة أو أعد التدرج الأولي من دون إعادة تحميل الصفحة.

استخدم CSS المُنشأ في تخطيط حقيقي

القاعدة المنسوخة صغيرة عن قصد: بديل خالص يتبعه مقدار التدرج الدقيق المعروض في المعاينة.

احتفظ ببديل خلفية خالص

ضع background-color قبل background-image ليبقى لون خالص قابل للاستخدام إذا لم يتوفر تصريح التدرج. راجع ذلك البديل في سياقه أيضًا.

طبّق التدرج كصورة خلفية

تدرجات CSS هي قيم صور. استخدم الدالة المُنشأة مع background-image أو اختصار background، لا كقيمة background-color.

راجع أحجام العناصر الحقيقية

ليس لتدرج CSS عرض أو ارتفاع طبيعي؛ بل يُعرض حسب العنصر الذي يُطبق عليه. اختبره على البطاقة والزر واللافتة والأحجام المتجاوبة الفعلية.

تحقق من قابلية القراءة واعرف الحدود

قد يفشل تصريح تدرج صالح في سياقه رغم ذلك. راجع التباين والمعنى وكل حالة متجاوبة أو تفاعلية قبل نشره.

اختبر النص عبر التدرج كله

قد يتغير التباين من أحد جانبي السطح إلى الآخر. اختبر النص مقابل المناطق ذات الصلة الأقل ملاءمة وأعد فحص حالات المرور والتركيز والتحديد.

لا تستخدم التدرج بوصفه إشارة البيانات الوحيدة

لا توفر صور خلفية CSS نصًا بديلاً أصليًا. أضف تسميات أو قيمًا أو تمثيلاً آخر متاحًا للجميع كلما كانت الألوان تنقل معنى.

اعرف ما لا يتم تصديره

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

الخصوصية والحدود

يعمل المحرر في علامة تبويب المتصفح هذه. ولا يرفع الألوان أو CSS المُنشأ، ولا يتطلب حسابًا.

• ألوان #RGB و#RRGGBB المعتمة فقط؛ لا عناصر تحكم لألفا أو التعتيم.
• لا تدرجات متكررة أو متعددة الطبقات أو شبكية أو بمسافة ألوان مخصصة.
• ينسخ CSS القياسي فقط؛ ولا يصدّر صورة أو SVG أو Tailwind أو ملف CSS.

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

هل مولّد تدرجات CSS هذا مجاني للاستخدام؟

نعم. يمكنك إنشاء تدرجات CSS ومعاينتها ونسخها من دون التسجيل أو تسجيل الدخول أو فتح النتيجة.

ما أنواع تدرجات CSS التي يدعمها؟

يدعم المولّد linear-gradient() وradial-gradient() وconic-gradient(). ويعرض كل نوع عناصر التحكم التي تؤثر في مخرجاته فقط.

كم محطة ألوان يمكنني إضافتها؟

يمكنك استخدام محطتين إلى ست محطات ألوان معتمة. تقبل كل محطة إدخال #RGB أو #RRGGBB وموضعًا من 0% إلى 100%.

ماذا تعني زوايا تدرج CSS؟

في التدرجات الخطية، تشير 0deg إلى الأعلى و90deg إلى اليمين و180deg إلى الأسفل و270deg إلى اليسار. تستخدم التدرجات المخروطية الزاوية باعتبارها دوران البداية حول نقطة الأصل المختارة.

هل يمكنني تغيير أصل التدرج الشعاعي أو المخروطي؟

نعم. يتيح لك الوضعان الشعاعي والمخروطي وضع الأصل في المركز أو عند حافة أو زاوية. كما يتيح الوضع الشعاعي اختيار دائرة أو قطع ناقص.

هل يمكنني نسخ قيمة التدرج فقط؟

نعم. انسخ قاعدة الفئة الكاملة عند الحاجة إلى بديل خالص، أو انسخ دالة التدرج فقط عند وضعها في تصريح موجود.

لماذا يتضمن CSS المُنشأ لون خلفية خالصًا؟

يوفر سطر background-color بديلاً بسيطًا قبل أن يطبق background-image التدرج. راجع لون ذلك البديل مقابل أي نص أو عناصر تحكم موضوعة عليه.

هل تدعم هذه الأداة الألوان الشفافة أو التعتيم؟

لا. تقبل هذه النسخة عمدًا ألوان #RGB و#RRGGBB المعتمة فقط. ولا تنشئ تدرجات ألفا أو متكررة أو متعددة الطبقات أو بمسافات ألوان مخصصة.

هل خلفيات تدرجات CSS متاحة للجميع؟

قد يكون التدرج الزخرفي مناسبًا، لكن قارئات الشاشة لا تعلن صور الخلفية ويمكن أن يتغير التباين عبر السطح. لا تستخدم التدرج بوصفه التمثيل الوحيد للبيانات ذات المعنى، واختبر النص مقابل المناطق الأقل ملاءمة ذات الصلة.

هل ترفع الأداة تدرجي أو تحفظه؟

لا تستخدم المحرر أي خدمة خارجية. تبقى إعداداتك في علامة تبويب المتصفح الحالية وتُعاد عند إعادة تحميل الصفحة.

أدوات ذات صلة

تابع باستخدام أداة أخرى تعمل في المتصفح.

أدوات تصميم مجانية

اختر الألوان وحوّلها

منتقي الألوان

اختر لونًا بصريًا أو أدخل قيمة HEX، ثم اضبط RGB وHSL والتعتيم بدقة. عاين النتيجة وقارن الدرجات القريبة وانسخ رمز اللون الدقيق من دون تسجيل دخول.

أدوات تصميم مجانية

تحقق من تباين اللون الخالص

مدقّق تباين الألوان

اختبر ألوان النص والخلفية وفقًا لـ WCAG 2.2 AA وAAA. اعرض نسبة التباين الدقيقة، وعاين حجم الخط ووزنه المحددين، واعرف ما إذا كان الزوج يجتاز الفحص.

C أدوات تصميم مجانية

أنشئ ظل صندوق CSS

مولّد ظل الصندوق CSS

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

S أدوات تصميم مجانية

حسّن رسم SVG

محسّن SVG

ارفع ترميز SVG أو الصقه، وحسّنه محليًا باستخدام SVGO، وقارن الكود وحجم الملف والنتيجة المرئية قبل التنزيل. لا يلزم تسجيل دخول أو رفع إلى خادم.