التدرجات في CSS هي صور تُولَّد برمجياً وتُستخدم كقيمة لـ background-image.
**linear-gradient:** تدرج خطي من لون لآخر. `linear-gradient(direction, color1, color2, ...)` - direction: `to right`, `to bottom right`, `45deg` - يمكن تحديد نقاط توقف: `red 0%, blue 50%, green 100%`
**radial-gradient:** تدرج دائري/إهليجي من نقطة مركزية. `radial-gradient(shape at position, color1, color2)` - shape: circle أو ellipse - position: center, top left, 50% 70%
**conic-gradient:** تدرج مخروطي (مثل قرص الألوان). `conic-gradient(from angle at position, color1, color2)` - مفيد لرسم مخططات دائرية (pie charts).
**repeating-gradients:** `repeating-linear-gradient`، `repeating-radial-gradient`، `repeating-conic-gradient` لأنماط متكررة مثل الخطوط والشبكات.
| 1 | /* Linear */ |
| 2 | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 3 | |
| 4 | /* Radial */ |
| 5 | background: radial-gradient(circle at center, #3b82f6, #1e3a8a); |
| 6 | |
| 7 | /* Conic — مخطط دائري */ |
| 8 | background: conic-gradient(#3b82f6 0deg 90deg, #10b981 90deg 200deg, #f59e0b 200deg 360deg); |
مثال 1: خلفيات متدرجة إبداعية
| 1 | /* تدرج خطي مائل */ |
| 2 | .card-primary { |
| 3 | background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #7c3aed 100%); |
| 4 | } |
| 5 | |
| 6 | /* تدرج شبكي */ |
| 7 | .grid-bg { |
| 8 | background-image: |
| 9 | linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px), |
| 10 | linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px); |
| 11 | background-size: 24px 24px; |
| 12 | } |
| 13 | |
| 14 | /* مخطط دائري بـ conic */ |
| 15 | .pie-chart { |
| 16 | width: 160px; |
| 17 | height: 160px; |
| 18 | border-radius: 50%; |
| 19 | background: conic-gradient( |
| 20 | #3b82f6 0% 35%, |
| 21 | #10b981 35% 60%, |
| 22 | #f59e0b 60% 80%, |
| 23 | #ef4444 80% 100% |
| 24 | ); |
| 25 | } |