گرادیانت‌ها (Gradients) روشی هستن برای ایجاد انتقال نرم بین دو یا چند رنگ بدون نیاز به تصویر.
با گرادیانت می‌تونی پس‌زمینه‌های مدرن و زیبا طراحی کنی.

✨ انواع گرادیانت‌ها در CSS

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

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

3. Conic Gradient (گرادیانت مخروطی / دایره‌ای زاویه‌ای)

🔹 ۱. Linear Gradient

انتقال رنگ‌ها در یک خط مستقیم (افقی، عمودی یا مورب).

div {
  width: 400px;
  height: 200px;
  background: linear-gradient(to right, red, yellow);
}

🔸 این کد یک گرادیانت از قرمز → زرد به صورت افقی ایجاد می‌کنه.

📌 می‌تونی جهت رو تغییر بدی:

• to bottom → عمودی (پیش‌فرض)

• to right → افقی

• to top left → مورب

• یا با زاویه: 45deg , 90deg , 180deg

مثال با زاویه:

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

🔹 ۲. Radial Gradient

انتقال رنگ‌ها از یک نقطه مرکزی به اطراف (دایره‌ای یا بیضوی).

div {
  width: 400px;
  height: 200px;
  background: radial-gradient(circle, red, yellow, green);
}

🔸 اینجا رنگ‌ها از مرکز شروع می‌شن و به بیرون پخش می‌شن.

📌 می‌تونی شکل و اندازه تعیین کنی:

• circle (دایره)

• ellipse (بیضی)

• closest-side, farthest-corner و ... برای اندازه.

🔹 ۳. Conic Gradient

انتقال رنگ‌ها به صورت زاویه‌ای دور مرکز (مثل کیک برش‌خورده 🍰).

div {
  width: 400px;
  height: 200px;
  background: conic-gradient(red, yellow, green, blue);
}

📌 این نوع گرادیانت بیشتر برای چارت‌های دایره‌ای یا افکت‌های دایره‌ای استفاده میشه.

🔹 رنگ‌های چندگانه و درصدها

می‌تونی چند رنگ با درصد دقیق مشخص کنی:

background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 100%);

🔹 شفافیت در گرادیانت

می‌تونی از رنگ‌های RGBA یا transparent استفاده کنی:

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

🔹 گرادیانت تکراری

برای ایجاد الگوهای زیبا میشه از repeating gradients استفاده کرد:

background: repeating-linear-gradient(
  45deg,
  red,
  red 10px,
  yellow 10px,
  yellow 20px
);

📌 این کد یه الگوی راه‌راه می‌سازه.

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