گرادیان خطی (Linear Gradient) در CSS یکی از روش‌های مدرن برای ایجاد پس‌زمینه‌های رنگی جذاب و پویا است که در آن رنگ‌ها به‌صورت تدریجی در یک جهت خاص ترکیب می‌شوند.

این ویژگی بدون نیاز به تصاویر، افکت‌های گرافیکی زیبا و سبک‌تری را برای طراحی وب فراهم می‌کند.

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

تابع linear-gradient() در CSS به این شکل استفاده می‌شود:

background: linear-gradient(جهت, رنگ۱, رنگ۲, ...);

🔹 پارامترهای قابل استفاده:

1. جهت گرادیان (اختیاری) – مانند to right، to bottom یا زاویه‌ای مانند 45deg
2. لیست رنگ‌ها – حداقل دو رنگ باید مشخص شود

۲. ایجاد گرادیان خطی ساده در CSS

✅ ۱. گرادیان از بالا به پایین (to bottom)

.box {
    width: 300px;
    height: 200px;
    background: linear-gradient(to bottom, red, blue);
}

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

✅ ۲. گرادیان از چپ به راست (to right)

.box {
    background: linear-gradient(to right, yellow, green);
}

🔹 نتیجه: رنگ از زرد (چپ) به سبز (راست) تغییر می‌کند.

✅ ۳. گرادیان در زاویه خاص (deg)

.box {
    background: linear-gradient(45deg, orange, purple);
}

🔹 نتیجه: رنگ در زاویه ۴۵ درجه از نارنجی به بنفش تغییر می‌کند.

📌 نکته:

• 0deg = از پایین به بالا
• 90deg = از چپ به راست
• 180deg = از بالا به پایین

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

✅ ۱. اضافه کردن چند رنگ در گرادیان

.box {
    background: linear-gradient(to right, red, orange, yellow, green, blue);
}

🔹 نتیجه: یک گرادیان رنگین‌کمانی از چپ به راست ایجاد می‌شود.

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

.box {
    background: linear-gradient(to right, red 20%, blue 80%);
}

🔹 نتیجه:
✅ رنگ قرمز تا ۲۰٪ عرض عنصر باقی می‌ماند
✅ رنگ آبی از ۲۰٪ تا ۸۰٪ ترکیب می‌شود

۴. ایجاد گرادیان با شفافیت (RGBA)

✅ ۱. گرادیان از شفاف به رنگی

.box {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

🔹 نتیجه: رنگ از کاملاً شفاف (۰٪) به قرمز کامل (۱۰۰٪) تغییر می‌کند.

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

✅ ۱. قرار دادن گرادیان روی تصویر

.box {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("image.jpg");
    background-size: cover;
}

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

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

✅ ۱. تغییر تدریجی رنگ گرادیان با @keyframes

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

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

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

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

✅ linear-gradient() به ما امکان می‌دهد پس‌زمینه‌های رنگی زیبا و بدون نیاز به تصویر ایجاد کنیم.
✅ می‌توان زاویه، رنگ و شدت تغییر رنگ را به دلخواه تنظیم کرد.
✅ امکان ترکیب گرادیان با تصاویر پس‌زمینه برای ایجاد افکت‌های حرفه‌ای‌تر وجود دارد.
✅ با انیمیشن CSS می‌توان افکت‌های متحرک گرادیانی ایجاد کرد.