صمّم تدرج CSS وانسخ الكود
ينشئ مولد تدرج CSS هذا خلفيات <code>linear-gradient()</code> و<code>radial-gradient()</code> و<code>conic-gradient()</code> بشكل مرئي. انقر على شريط النقاط لإضافة ألوان، واسحبها إلى مكانها، واضبط شفافية كل نقطة، ثم عدّل الزاوية أو الشكل أو المركز بينما تتحدث المعاينة مباشرة. انسخ CSS مع لون احتياطي صلب، أو انسخ فئة Tailwind جاهزة، أو صدّر التدرج كصورة PNG بأي حجم. الصق تدرجًا من ملف الأنماط لديك لتعديله هنا. كل شيء يعمل محليًا في متصفحك.
كيف تصنع تدرج CSS
- 1اختر خطي أو شعاعي أو مخروطي، أو ابدأ من أحد القوالب الجاهزة.
- 2انقر في أي مكان على شريط النقاط لإضافة نقطة لون، واسحب النقاط لتحريكها، واضغط Delete على النقطة المحددة لحذفها. تحرّك مفاتيح الأسهم النقطة المحددة بمقدار 1%، وShift+سهم بمقدار 10%.
- 3اختر لون كل نقطة وشفافيتها. يصلح أي لون CSS: hex أو
rgb()أوhsl()أوoklch()أو اسم لون. - 4اضبط الزاوية بالقرص (اضغط Shift للقفز كل 15°)، أو في التدرجات الشعاعية والمخروطية اسحب على المعاينة لتحريك المركز.
- 5انسخ CSS أو فئة Tailwind، أو حدد العرض والارتفاع ونزّل صورة PNG.
التدرجات الخطية والشعاعية والمخروطية
- linear-gradient()
- تتغير الألوان على طول خط مستقيم بزاوية معينة. <code>0deg</code> يشير إلى الأعلى و<code>90deg</code> إلى اليمين؛ والكلمتان المفتاحيتان <code>to right</code> و<code>to bottom left</code> تعنيان الشيء نفسه بالكلمات. خط التدرج طويل بما يكفي تمامًا لتصل الزوايا إلى اللون الأول والأخير.
- radial-gradient()
- تنتشر الألوان من المركز إلى الخارج على شكل دائرة أو قطع ناقص. تحدد كلمة الحجم أين تقع نسبة 100%: <code>farthest-corner</code> (الافتراضية) تصل إلى أبعد زاوية في العنصر، و<code>closest-side</code> تتوقف عند أقرب حافة.
- conic-gradient()
- تدور الألوان حول المركز مثل عقارب الساعة، بدءًا من زاوية <code>from</code>. تتيح النقاط الحادة رسم المخططات الدائرية وعجلات الألوان دون أي صور.
نقاط الألوان والحواف الحادة والشفافية
كل نقطة لون هي لون وموضع. بين نقطتين يمزج المتصفح الألوان بسلاسة؛ وعندما تشترك نقطتان في الموضع نفسه يتغير اللون فجأة، وهكذا تُرسم الخطوط والأعلام والمخططات الدائرية. أعطِ اللون نفسه لنقطتين متجاورتين لتثبيته كشريط صلب.
يمكن أن تكون النقاط شفافة جزئيًا، فيستطيع التدرج دمج صورة في الصفحة تدريجيًا أو تعتيم أسفل الصورة الرئيسية ليبقى النص الأبيض مقروءًا. تمزج المتصفحات الحديثة النقاط الشفافة بألوان مضروبة مسبقًا، لذا لم يعد التلاشي إلى transparent يصبح رماديًا في المنتصف، لكن المولد يكتب لون rgba() صريحًا للوضوح.
التدرجات المتكررة
تكرر repeating-linear-gradient() ونظيرتاها الشعاعية والمخروطية النمط الواقع بين النقطة الأولى والأخيرة على كامل العنصر. فعّل التكرار وحرّك النقطة الأخيرة قبل 100% بكثير، إلى 10% مثلًا، لتحصل على خطوط أو حلقات أو أشعة. إذا كانت النقطة الأخيرة عند 100% يبدو التدرج المتكرر تمامًا مثل التدرج العادي.
اللون الاحتياطي وTailwind وتصدير PNG
التدرجات صور، لذا فالمتصفح الذي لا يستطيع رسمها لا يُظهر شيئًا خلف نصك. يضبط سطر اللون الاحتياطي الاختياري أولًا background صلبًا يساوي متوسط نقاطك، ثم يتجاوزه سطر التدرج بعده حيثما تعمل التدرجات.
مخرج Tailwind فئة ذات قيمة اعتباطية مثل bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. تتحول المسافات إلى شرطات سفلية لأن أسماء فئات Tailwind لا يمكن أن تحتوي على مسافات؛ وتعمل في Tailwind 3 و4 دون أي إعداد.
يرسم تصدير PNG التدرج نفسه على canvas بالحجم الذي تختاره، حتى 8192 بكسل لكل ضلع، للخلفيات أو صور وسائل التواصل أو أدوات التصميم التي لا تقرأ CSS. اختر ألوانًا تناسب نصك باستخدام مدقق التباين، أو حوّلها بين الصيغ عبر محول الألوان، أو أضف عمقًا باستخدام مولد box-shadow.
تعديل تدرج موجود
الصق تدرجًا في استيراد: دالة linear-gradient(…) وحدها، أو تصريح background: أو background-image: كاملًا، أو نسخة ببادئة -webkit-، أو فئة Tailwind bg-[…]. تُقرأ الاتجاهات مثل to top right، والزوايا بوحدات deg أو turn أو rad، والنقاط ذات الموضعين والنقاط بلا موضع. لا يمكن عرض المواضع بالبكسل وتلميحات الألوان على شريط بالنسب المئوية، لذا تُقرّب ويخبرك الاستيراد بذلك.
الأسئلة الشائعة
- كيف أصنع خلفية متدرجة في CSS؟
- اضبط background (أو background-image) على دالة تدرج، مثل background: linear-gradient(90deg, #ff7e5f, #feb47b);. يكتب هذا المولد هذا السطر نيابة عنك، مع لون احتياطي صلب اختياري قبله.
- ما الفرق بين التدرج الخطي والشعاعي والمخروطي؟
- يغيّر التدرج الخطي اللون على طول خط مستقيم، وينتشر التدرج الشعاعي من المركز في دوائر أو قطوع ناقصة، ويدور التدرج المخروطي حول المركز مثل عقرب الساعة.
- كيف أصنع حافة حادة أو خطوطًا؟
- ضع نقطتين بلونين مختلفين في الموضع نفسه. وللخطوط المتكررة فعّل التكرار وضع النقطة الأخيرة على قيمة صغيرة مثل 10%.
- هل يمكن أن يكون تدرج CSS شفافًا؟
- نعم. اخفض شفافية النقطة وسيكتبها المولد بصيغة rgba(). التدرج من لون إلى الشفافية طريقة شائعة لدمج صورة أو طبقة في الصفحة تدريجيًا.
- كيف أستخدم التدرج في Tailwind CSS؟
- انسخ فئة Tailwind، وهي قيمة اعتباطية مثل bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]، وأضفها إلى عنصرك. أدوات Tailwind المدمجة from-/via-/to- تغطي التدرجات الخطية البسيطة فقط؛ أما القيمة الاعتباطية فتدعم أي تدرج.
- هل تعمل التدرجات المخروطية في كل المتصفحات؟
- تعمل conic-gradient() في كل الإصدارات الحالية من Chrome وEdge وFirefox وSafari. أضف اللون الاحتياطي إذا كنت لا تزال تدعم متصفحات قديمة جدًا.
- هل يمكنني تنزيل التدرج كصورة؟
- نعم. أدخل العرض والارتفاع ونزّل صورة PNG. تُرسم الصورة في متصفحك بهذا الحجم تمامًا، حتى 8192 × 8192 بكسل.
- هل يُرفع أي شيء؟
- لا. المعاينة وكود CSS وتصدير PNG كلها تُنتج في متصفحك.