گرادیان شعاعی (Radial Gradient) در CSS به ما امکان می‌دهد تا پس‌زمینه‌هایی با تغییر رنگ تدریجی از یک نقطه مرکزی به سمت بیرون ایجاد کنیم.

این گرادیان برخلاف گرادیان خطی (Linear Gradient) که در یک جهت خاص گسترش می‌یابد، به‌صورت دایره‌ای یا بیضوی پخش می‌شود.

۱. نحوه تعریف radial-gradient() در CSS

برای ایجاد یک گرادیان شعاعی، از تابع radial-gradient() در ویژگی background استفاده می‌شود.

background: radial-gradient(شکل و موقعیت, رنگ۱, رنگ۲, ...);

🔹 پارامترهای اصلی:

1. شکل (دایره‌ای یا بیضوی)
2. نقطه شروع گرادیان (مرکز یا موقعیت دیگر)
3. لیست رنگ‌ها (حداقل دو رنگ)

۲. ایجاد گرادیان شعاعی ساده در CSS

✅ ۱. گرادیان شعاعی پیش‌فرض (دایره‌ای از مرکز)

.box {
    width: 300px;
    height: 300px;
    background: radial-gradient(red, blue);
}

🔹 نتیجه: رنگ از قرمز در مرکز به آبی در لبه‌ها تغییر می‌کند.

✅ نکته: اگر هیچ مقدار خاصی مشخص نشود، گرادیان دایره‌ای و از مرکز عنصر اعمال می‌شود.

✅ ۲. تغییر شکل گرادیان به بیضوی (ellipse)

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

🔹 نتیجه: گرادیان بیضوی‌شکل خواهد بود.

✅ مقدار ellipse باعث می‌شود گرادیان بر اساس ابعاد عنصر، به‌جای دایره‌ای، بیضوی باشد.

✅ ۳. تغییر موقعیت مرکز گرادیان

.box {
    background: radial-gradient(circle at top left, red, blue);
}

🔹 نتیجه: رنگ قرمز از گوشه بالا-چپ شروع شده و به سمت پایین-راست آبی می‌شود.

✅ مقادیر موقعیت قابل استفاده:

• at center (پیش‌فرض) → مرکز
• at top → بالا
• at bottom → پایین
• at left → چپ
• at right → راست
• at top left → گوشه بالا-چپ
• at bottom right → گوشه پایین-راست

۳. استفاده از چندین رنگ در گرادیان شعاعی

✅ ۱. ترکیب چند رنگ مختلف

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

🔹 نتیجه: رنگ‌ها از قرمز در مرکز تا آبی در لبه‌ها به‌صورت تدریجی تغییر می‌کنند.

✅ ۲. تعیین درصد رنگ‌ها در گرادیان

.box {
    background: radial-gradient(circle, red 20%, yellow 40%, blue 80%);
}

🔹 نتیجه:
✅ ۲۰٪ از مرکز قرمز باقی می‌ماند.
✅ رنگ زرد بین ۲۰٪ تا ۴۰٪ قرار می‌گیرد.
✅ رنگ آبی از ۴۰٪ تا ۸۰٪ گسترش می‌یابد.

۴. کنترل اندازه گرادیان با closest-side و farthest-corner

✅ ۱. اندازه گرادیان تا نزدیک‌ترین ضلع (closest-side)

.box {
    background: radial-gradient(circle closest-side, red, blue);
}

🔹 نتیجه: گرادیان تا نزدیک‌ترین ضلع عنصر گسترش می‌یابد.

✅ ۲. اندازه گرادیان تا دورترین گوشه (farthest-corner)

.box {
    background: radial-gradient(circle farthest-corner, red, blue);
}

🔹 نتیجه: گرادیان تا دورترین گوشه عنصر گسترش می‌یابد.

✅ دیگر مقادیر:

• closest-corner → تا نزدیک‌ترین گوشه
• farthest-side → تا دورترین ضلع

۵. ترکیب radial-gradient با تصویر پس‌زمینه

.box {
    background: radial-gradient(circle, rgba(0,0,0,0.5), rgba(0,0,0,0)), url("background.jpg");
    background-size: cover;
}

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

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

۶. انیمیشن دادن به گرادیان شعاعی در CSS

✅ تغییر تدریجی رنگ‌ها با @keyframes

@keyframes gradientAnimation {
    0% { background: radial-gradient(circle, red, blue); }
    50% { background: radial-gradient(circle, green, yellow); }
    100% { background: radial-gradient(circle, purple, pink); }
}

.box {
    width: 300px;
    height: 300px;
    animation: gradientAnimation 5s infinite;
}

🔹 نتیجه: رنگ‌ها هر ۵ ثانیه تغییر می‌کنند.

✅ کاربرد: برای ایجاد جلوه‌های متحرک و پویا در وب‌سایت‌ها.

۷. مقایسه linear-gradient و radial-gradient

✅ انتخاب بین linear-gradient و radial-gradient بستگی به نوع طراحی شما دارد.

۸. نتیجه‌گیری

✅ radial-gradient() برای ایجاد پس‌زمینه‌های دایره‌ای یا بیضوی با تغییر رنگ تدریجی استفاده می‌شود.
✅ می‌توان شکل (دایره یا بیضی)، موقعیت و اندازه گرادیان را تنظیم کرد.
✅ استفاده از چند رنگ و تنظیم شفافیت (RGBA) می‌تواند جلوه‌های زیباتری ایجاد کند.
✅ امکان ترکیب گرادیان با تصاویر پس‌زمینه و ایجاد انیمیشن در CSS وجود دارد.

🎨 با radial-gradient() می‌توانید جلوه‌های حرفه‌ای و زیبایی در طراحی وب ایجاد کنید!