Gradients (Linear، Radial، Conic)

رنگ‌آمیزی بدون تصویر: Linear، Radial و Conic Gradient

در دو درس قبل با تصاویر واقعی به‌عنوان پس‌زمینه آشنا شدیم. اما CSS ابزاری هم داره که بدون نیاز به هیچ فایل تصویری، می‌تونه یک گذر نرم و تدریجی بین چند رنگ بسازه؛ این ابزار Gradient نام داره و در واقع نوع خاصی از مقدار برای Property به اسم background-image محسوب می‌شه.

Gradient چیست و چرا یک نوع تصویر محسوب می‌شود؟

Gradient (گرادیان) یک تصویر تولیدشده توسط خود مرورگره، نه یک فایل خارجی؛ به همین دلیل، دقیقاً مثل url()، به‌عنوان مقدار background-image استفاده می‌شه.

.box {
  background-image: linear-gradient(red, blue);
}

Linear Gradient: گذر خطی

linear-gradient() یک گذر رنگی در یک جهت مستقیم (خطی) می‌سازه.

ساده‌ترین حالت: دو رنگ بدون جهت مشخص

.box {
  background-image: linear-gradient(red, blue);
}

وقتی جهتی مشخص نکنیم، مرورگر به‌طور پیش‌فرض گذر رو از بالا به پایین اجرا می‌کنه؛ یعنی رنگ قرمز از بالای عنصر شروع می‌شه و به‌تدریج به آبی در پایین تبدیل می‌شه.

مشخص کردن جهت

.to-right {
  background-image: linear-gradient(to right, red, blue);
}

.to-bottom-right {
  background-image: linear-gradient(to bottom right, red, blue);
}

.angle {
  background-image: linear-gradient(45deg, red, blue);
}

جهت گذر رو می‌شه هم با کلیدواژه‌هایی مثل to right، to bottom right و مشابه‌ها مشخص کرد، و هم با یک زاویه دقیق (با واحد deg که در فصل ۶ دیدیم). زاویه 0deg معادل «از پایین به بالا»ست، و با افزایش عدد، جهت به‌صورت ساعت‌گرد می‌چرخه.

بیش از دو رنگ (Color Stops)

.multi-color {
  background-image: linear-gradient(to right, red, yellow, green);
}

می‌شه بیش از دو رنگ هم در یک گذر خطی استفاده کرد؛ مرورگر این رنگ‌ها رو به‌ترتیب و با فاصله مساوی، در طول مسیر گذر پخش می‌کنه.

کنترل دقیق موقعیت هر رنگ

.custom-stops {
  background-image: linear-gradient(to right, red 0%, yellow 30%, green 100%);
}

هر رنگ می‌تونه یک مقدار درصدی (یا واحد دیگه) بعد از خودش داشته باشه که مشخص می‌کنه دقیقاً در کجای مسیر گذر قرار بگیره. در این مثال، رنگ زرد به‌جای موقعیت پیش‌فرض وسط (۵۰٪)، در نقطه ۳۰٪ مسیر قرار می‌گیره؛ یعنی گذر از قرمز به زرد سریع‌تر اتفاق می‌افته، و از زرد به سبز، فضای بیشتری (از ۳۰٪ تا ۱۰۰٪) طی می‌کنه.

Radial Gradient: گذر دایره‌ای

radial-gradient() به‌جای یک مسیر خطی، گذر رنگی رو از یک نقطه مرکزی به‌سمت بیرون، به‌صورت دایره‌ای یا بیضی، پخش می‌کنه.

.radial {
  background-image: radial-gradient(circle, yellow, orange);
}

در این مثال، رنگ زرد از مرکز عنصر شروع می‌شه و به‌تدریج، هرچه از مرکز دورتر بشیم، به رنگ نارنجی تبدیل می‌شه.

شکل: circle در برابر ellipse

.circle-shape {
  background-image: radial-gradient(circle, red, blue);
}

.ellipse-shape {
  background-image: radial-gradient(ellipse, red, blue);
}

مقدار پیش‌فرض شکل، ellipse (بیضی) است که خودش رو با نسبت ابعاد عنصر (عرض و ارتفاع) تطبیق می‌ده. مقدار circle همیشه یک دایره کامل و متقارن می‌سازه، صرف‌نظر از نسبت ابعاد عنصر.

موقعیت مرکز گذر

.positioned-radial {
  background-image: radial-gradient(circle at top left, yellow, orange);
}

دقیقاً مشابه background-position که در درس قبل دیدیم، می‌شه با کلیدواژه at مشخص کرد گذر دایره‌ای، از کدوم نقطه از عنصر شروع بشه؛ نه لزوماً از مرکز.

Conic Gradient: گذر مخروطی (چرخشی)

conic-gradient() جدیدترین نوع Gradient در CSS مدرن‌ه؛ به‌جای گذر خطی یا دایره‌ای از مرکز به بیرون، رنگ‌ها رو دور یک نقطه مرکزی، مثل عقربه‌های ساعت، می‌چرخونه.

.conic {
  background-image: conic-gradient(red, yellow, green, blue, red);
}

در این مثال، رنگ‌ها به‌ترتیب، دور مرکز عنصر می‌چرخن؛ نتیجه‌ای شبیه یک چرخ رنگ یا نمودار دایره‌ای (Pie Chart) به‌دست میاد.

کاربرد عملی: ساخت یک نمودار دایره‌ای ساده

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: conic-gradient(
    teal 0% 40%,
    coral 40% 75%,
    gold 75% 100%
  );
}

با ترکیب conic-gradient() و border-radius: 50% (که در درس‌های بعدی همین فصل کامل بررسیش می‌کنیم و یک جعبه رو کاملاً دایره‌ای می‌کنه)، می‌شه یک نمودار دایره‌ای ساده رو کاملاً با CSS خالص، بدون هیچ تصویر یا کتابخانه گرافیکی، ساخت.

مقایسه سه نوع Gradient

نوع	الگوی گذر	کاربرد رایج
linear-gradient	خطی، در یک جهت مستقیم	پس‌زمینه‌های ساده، افکت‌های نوری، دکمه‌ها
radial-gradient	دایره‌ای یا بیضی، از یک نقطه مرکزی به بیرون	افکت نور نقطه‌ای (Spotlight)، جلوه‌های تزئینی
conic-gradient	چرخشی، دور یک نقطه مرکزی	نمودار دایره‌ای، چرخ رنگ، جلوه‌های خاص

Gradient شفاف با rgba یا hsl

.overlay-gradient {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

یکی از کاربردهای بسیار رایج، ترکیب Gradient با رنگ‌های نیمه‌شفاف (که در فصل ۷ دیدیم)؛ در این مثال، یک گذر از کاملاً شفاف در بالا به مشکی نیمه‌کدر در پایین ساخته شده. این تکنیک اغلب روی تصاویر استفاده می‌شه تا متن پایین یک عکس (مثلاً عنوان یک مقاله)، بدون از‌بین بردن کل تصویر، خواناتر بشه.

.image-with-overlay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url("photo.jpg");
}

در این مثال، دقیقاً همون منطق چند تصویر پس‌زمینه که در درس‌های قبل دیدیم به‌کار رفته؛ Gradient به‌عنوان یک لایه شفاف روی تصویر واقعی قرار می‌گیره.

نکات مهم

• Gradientها نوعی تصویر تولیدشده توسط مرورگر هستند و به‌عنوان مقدار background-image استفاده می‌شوند.
• linear-gradient گذر خطی، radial-gradient گذر دایره‌ای از مرکز به بیرون، و conic-gradient گذر چرخشی دور یک نقطه مرکزی می‌سازد.
• می‌توان موقعیت دقیق هر رنگ (Color Stop) را با یک مقدار درصدی بعد از آن رنگ مشخص کرد.

اشتباهات رایج

• فراموش کردن اینکه جهت پیش‌فرض linear-gradient (بدون تعیین جهت)، از بالا به پایین است، نه از چپ به راست.
• قاطی کردن circle و ellipse در radial-gradient؛ اولی همیشه متقارن است، دومی با ابعاد عنصر تطبیق می‌یابد.
• استفاده از Gradientهای پیچیده و پرکنتراست در پس‌زمینه متن، که می‌تواند خوانایی را کاهش دهد.

جمع‌بندی

Gradientها امکان ساخت گذرهای رنگی نرم و تدریجی را، بدون نیاز به هیچ فایل تصویری، مستقیماً در CSS فراهم می‌کنند. linear-gradient برای گذر خطی، radial-gradient برای گذر دایره‌ای از مرکز به بیرون، و conic-gradient برای گذر چرخشی دور یک نقطه استفاده می‌شود؛ هر سه نوع می‌توانند با رنگ‌های نیمه‌شفاف ترکیب شده و حتی به‌عنوان یک لایه اضافه روی تصاویر واقعی قرار بگیرند.