CSS Gradients

🎨 انواع گرادیان در CSS

1. گرادیان خطی (Linear Gradient)

.box {
background: linear-gradient(to right, red, yellow);
/* از قرمز به سمت زرد در جهت راست */
}

📌 زاویه‌ها:

background: linear-gradient(45deg, blue, pink);

2. گرادیان شعاعی (Radial Gradient)

• تغییر رنگ از مرکز به اطراف (دایره یا بیضی).

.box {
background: radial-gradient(circle, red, yellow, green);
}

3. گرادیان مخروطی (Conic Gradient)

• تغییر رنگ به صورت دایره‌ای (مثل ساعت یا نمودار).

.box {
background: conic-gradient(from 90deg, red, yellow, green, blue);
}

📌 نکات و قابلیت‌ها

چند رنگ

background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);

توقف رنگ (Color Stops)

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

ترکیب با شفافیت

background: linear-gradient(to right, rgba(255,0,0,0.8), transparent);

تکرار گرادیان (Repeating)

background: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px);

📌 مثال کامل

.card {
width: 250px;
height: 150px;
border-radius: 15px;
color: white;
display: flex;
align-items: center;
justify-content: center;

background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);

}

✅ نتیجه:
گرادیان‌ها در CSS جایگزین قدرتمندی برای تصاویر پس‌زمینه هستند، حجم کد کمتر و کنترل بیشتری روی رنگ‌ها و تغییرات می‌دهند.