گرادیان‌ها در CSS به شما این امکان را می‌دهند که رنگ‌ها را به آرامی و در طول یک سطح تغییر دهید. این کار جلوه‌های زیبایی را ایجاد می‌کند که می‌توانید در طراحی‌های وب خود به‌کار ببرید. گرادیان‌ها به دو نوع اصلی تقسیم می‌شوند: خطی و شعاعی. در گرادیان خطی، رنگ‌ها در طول یک خط تغییر می‌کنند، در حالی که در گرادیان شعاعی، رنگ‌ها از نقطه‌ای به‌صورت دایره‌ای گسترش می‌یابند.
گرادیان‌های خطی به شما اجازه می‌دهند تا کنترل دقیقی روی زاویه و مسیر تغییرات رنگ‌ها داشته باشید. می‌توانید به راحتی یک پس‌زمینه زیبا با چند رنگ ایجاد کنید. نحوه استفاده از آن‌ها در CSS بسیار ساده است؛ کافی است از دستور background یا background-image استفاده کنید و نوع گرادیان خود را مشخص کنید.
در مقابل، گرادیان‌های شعاعی از نقطه‌ای شروع می‌شوند و به طور دایره‌وار گسترش می‌یابند. این نوع گرادیان‌ها برای ایجاد جلوه‌های طبیعی یا دایره‌های رنگی بسیار مناسب هستند. با تغییر فواصل و رنگ‌ها می‌توانید به نتایج جالبی برسید.
هر نوع گرادیان می‌تواند به عنوان بخشی از سبکدهی پس‌زمینه استفاده شود و گزینه‌های متعددی را برای سفارشی‌سازی فراهم می‌آورد. می‌توان این گرادیان‌ها را در کنار دیگر عناصر CSS نظیر باکس‌شیدو یا بوردر استفاده کرد تا جلوه‌های بصری پیشرفته‌تری به‌وجود آورد.
گرادیان‌ها قابل انیمیشن‌سازی نیز هستند و می‌توانند در انتقال‌های پیچیده استفاده شوند. با استفاده از keyframes و transitions، می‌توان اشکال و رنگ‌ها را تغییر داد تا تمرکز بیشتری بر طراحی‌های تعاملی و پویای وب ایجاد کنید.
در زیر به نمونه‌ای از کد CSS برای ایجاد یک گرادیان ساده می‌پردازیم:
body {
background: linear-gradient(to right, red, yellow);
}
.circle {
background: radial-gradient(circle, #00f, #0f0, #f00);
width: 200px;
height: 200px;
border-radius: 50%;
}
شرح کد
body {
انتخاب عنصر بدنه (body) برای اعمال گرادیان بر روی کل صفحه.
background: linear-gradient(to right, red, yellow);
تعریف گرادیان خطی که از قرمز به زرد تغییر می‌کند. مسیر تغییر رنگ به سمت راست است.
}
پایان تنظیمات برای بخش body.
.circle {
انتخاب هر عنصری با کلاس circle برای اعمال گرادیان شعاعی.
background: radial-gradient(circle, #00f, #0f0, #f00);
تعریف گرادیان شعاعی که از آبی به سبز و سپس به قرمز تغییر می‌کند.
width: 200px;
تنظیم عرض دایره به 200 پیکسل.
height: 200px;
تنظیم ارتفاع دایره به 200 پیکسل.
border-radius: 50%;
گرد کردن حاشیه‌ها به صورت دایره‌ای برای کلاس circle.
}
پایان تنظیمات برای بخش circle.