CSS Gradients

گرادیانت‌ها (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 );

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

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