مولّد تدرّج لوني CSS
اختر الألوان والزاوية، وشاهد المعاينة، وانسخ كود الخلفية بـ CSS.
CSS
اصنع تدرّجًا لونيًا بـ CSS أونلاين
تُستخدم الخلفيات المتدرّجة في الأقسام الرئيسية والأزرار والبطاقات والطبقات فوق الصور. تفتح هذه الصفحة مولّد CSS على تبويب التدرّج، فتجرّب الزوايا والألوان بعينك وتنسخ سطر CSS الدقيق.
أمثلة
| CSS | النتيجة |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | من البنفسجي على اليسار إلى الأخضر على اليمين |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | تعتيم في الأسفل، يُستخدم لإبقاء النص مقروءًا فوق صورة |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | بقعة ضوء ناعمة في المركز |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | مخطط دائري بربع مميّز |
نصائح
الألوان المتقاربة على عجلة الألوان تمتزج بسلاسة؛ أما الألوان المتقابلة فتميل إلى الرمادي في المنتصف، ويعالج ذلك لون إضافي بينهما. ولا تنسَ تباين النص: افحص أفتح جزء في التدرّج وأغمقه مقابل لون النص.
أدوات ذات صلة
لإضافة ظل إلى العنصر نفسه، راجع مولّد box-shadow. ولتحويل لون إلى HEX أو RGB أو HSL، استخدم محوّل الألوان.