گرادیان در CSS
رنگ یکدست و عکس خیلی از پس‌زمینه‌ها را پوشش می‌دهد. گاهی درهم‌آمیختگی نرم بین رنگ‌ها می‌خواهید — بنر آرام، کارت درخشان، آسمان بدون فایل عکس سنگین. آن درهم‌آمیختگی گرادیان است؛ CSS آن را به‌صورت نوعی background-image می‌کشد.
گرادیان CSS چیست؟
گرادیان تصویری است که مرورگر می‌سازد — نه JPG که دانلود کنید. با توابعی مثل linear-gradient() و radial-gradient() توصیفش می‌کنید، بعد در background-image (یا میان‌بر background) می‌گذارید. نتیجه مثل پس‌زمینهٔ عکسی پشت محتوا می‌نشیند.
گونه‌ها در یک نگاه
با این دو تا شروع کنید. گرادیان مخروطی بعداً اگر لازم شد.
📊 گونه‌های روزمرهٔ گرادیان CSS
| گونه | تابع | استفادهٔ روزمره |
|---|---|---|
| خطی | linear-gradient(…) |
بنر، دکمه، شستشوی بخش چپ→راست یا بالا→پایین |
| شعاعی | radial-gradient(…) |
کارت نورافکن نرم، محو دایره‌ای از مرکز |
| کلمهٔ جهت | to right، to bottom |
جهت خطی خوانا بدون زاویه |
| زاویه | 45deg، 90deg |
شیب دقیق وقتی کلمه کافی نیست |
| ایستگاه رنگ | teal 0%، navy 100% |
هر رنگ کجای درهم‌آمیختگی بنشیند |
خطی: دو رنگ، چپ به راست
ساده‌ترین گرادیان خطی به یک جهت و دست‌کم دو رنگ نیاز دارد. CSS بینشان درهم می‌آمیزد.
گرادیان خطی ساده چپ به راست
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}تابع را چطور بخوانیم؟
to right جهت است. #0f766e شروع می‌کند؛ #0f172a تمام. مرورگر فاصلهٔ وسط را پر می‌کند.
زاویه و ایستگاه بیشتر
برای شستشوی اریب از زاویه استفاده کنید و اگر درهم‌آمیختگی غنی‌تر می‌خواهید، ایستگاه میانی اضافه کنید.
خطی زاویه‌دار با سه ایستگاه
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}عادت ایستگاه
ایستگاه رنگ یعنی «این رنگ در این جا.» درصد خواناست. می‌توانید موقعیت را ننویسید تا مرورگر رنگ‌ها را یکنواخت پخش کند.
شعاعی: محو از مرکز
radial-gradient() از یک نقطهٔ مرکزی به بیرون پخش می‌شود — برای کارت نرم و درخشش تمرکز مفید است.
کارت شعاعی نرم
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}نکتهٔ دایره
circle at center شکل را گرد و وسط نگه می‌دارد. بعداً می‌توانید at top یا at 20% 30% برای نورافکن جای دیگر.
گرادیان روی background-image زندگی می‌کند
تابع گرادیان را در color نگذارید — آن ویژگی متن را رنگ می‌کند. گرادیان تصویر پس‌زمینه است؛ همان عادت‌های کنتراست متن روی عکس اینجا هم مهم است.
میان‌بر با رنگ پشتیبان
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}خودتان امتحان کنید
- یک
.bannerباlinear-gradient(to right, #0f766e, #0f172a)و متن روشن. - جهت را
to bottomکنید — محور درهم‌آمیختگی عوض می‌شود. - یک
.heroبا135degو سه ایستگاه (فیروزه → میانی → سرمه‌ای). - یک
.cardباradial-gradient(circle at center, #ccfbf1, #0f766e). - اختیاری: در میان‌بر
backgroundقبل از گرادیان یک رنگ توپر پشتیبان بگذارید.
اشتباهات رایج
- نوشتن
color: linear-gradient(…)— گرادیان رنگ متن نیست - فقط یک ایستگاه رنگ — برای درهم‌آمیختگی دست‌کم دو رنگ لازم است
- فراموش کردن که این
background-imageاست (کنتراست و لایه‌ها هنوز مهم‌اند) - رنگین‌کمان شلوغ روی هر بخش — شستشوی نرم دو یا سه ایستگاه حرفه‌ای‌تر خوانده می‌شود
- انتظار اینکه گرادیان جای عکس معنادار را بگیرد (عکس محصول هنوز تصویر واقعی می‌خواهد)
خلاصه
- گرادیان تصویر ساختهٔ مرورگر برای پس‌زمینه است
linear-gradient()روی خط درهم می‌آمیزد؛radial-gradient()از مرکز- کلمهٔ جهت، زاویه و ایستگاه رنگ ظاهر را کنترل می‌کنند
- با
background-imageیا میان‌برbackgroundوصلش کنید - کنتراست متن روی گرادیان را قوی نگه دارید
- یک بنر خطی و یک کارت شعاعی تمرین کنید قبل از ترفندهای پیچیده‌تر
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود