مولّد تدرجات CSS

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

تدرجات جاهزة

دليل تدرجات CSS

linear-gradient()

تدرج خطي من نقطة إلى أخرى. يمكن تحديد الاتجاه بالكلمات (to right) أو الزاوية (135deg).

linear-gradient(135deg, #purple, #pink)
radial-gradient()

تدرج دائري ينتشر من المركز للخارج. مثالي لتأثيرات الضوء والبريق.

radial-gradient(circle, #pink, #purple)
conic-gradient()

تدرج مخروطي يدور حول نقطة مركزية. مثالي لرسم الرسوم البيانية الدائرية (Pie charts).

conic-gradient(#green 180deg, #blue)
نقاط متعددة

يمكن إضافة أي عدد من الألوان مع تحديد موضع كل لون بالنسبة المئوية.

linear-gradient(red 0%, blue 50%, green 100%)

استخدامات تدرجات CSS: