گرادیان CSS چیست؟
گرادیان یعنی تغییر تدریجی از یک رنگ به رنگ دیگر. در CSS گرادیان یک «تصویر» است که مرورگر خودش می‌سازد، پس به‌جای عکس پس‌زمینه‌ی سنگین، با یک خط کد پس‌زمینه‌ی رنگی، دکمه‌ی براق یا هاله‌ی نور می‌سازی؛ بدون هیچ درخواست اضافه به سرور و با کیفیت کامل در هر اندازه‌ی صفحه.
سه نوع گرادیان در CSS
| تابع | شکل | کاربرد رایج |
|---|---|---|
linear-gradient | خطی با زاویه | پس‌زمینه‌ی هیرو، دکمه، نوار |
radial-gradient | دایره یا بیضی از یک نقطه | هاله‌ی نور، تمرکز روی یک بخش |
conic-gradient | چرخشی دور یک نقطه | نمودار دایره‌ای، حلقه‌ی پیشرفت، چرخه‌ی رنگ |
هر سه نسخه‌ی تکرارشونده هم دارند (repeating-linear-gradient و…) که برای ساخت راه‌راه و الگو کاربرد دارد. موقعیت هر رنگ (color stop) را با درصد مشخص می‌کنی؛ اگر دو رنگ در یک موقعیت باشند، مرز تیز ساخته می‌شود.
متن گرادیانی
یکی از پرکاربردترین ترفندها، تیتر با رنگ گرادیانی است:
.title {
background: linear-gradient(90deg, #7c5cff, #ff4d8d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}حاشیه‌ی گرادیانی با گوشه‌ی گرد
border-image با border-radius کار نمی‌کند. راه درست، دو لایه پس‌زمینه با padding-box و border-box است:
.card {
border: 2px solid transparent;
background:
linear-gradient(#10131a, #10131a) padding-box,
linear-gradient(135deg, #7c5cff, #3ddc84) border-box;
}نکته‌های طراحی گرادیان
- رنگ‌های مکمل (مثل قرمز و سبز) وسط گرادیان رنگ خاکستری و کدر می‌سازند؛ یک رنگ میانی اضافه کن یا از
in oklchاستفاده کن. - روی پس‌زمینه‌ی گرادیانی، کنتراست متن را با تیره‌ترین و روشن‌ترین نقطه بسنج؛ از ابزار بررسی کنتراست کمک بگیر.
- انیمیشن مستقیم گرادیان سنگین است؛ به‌جایش
background-positionیاbackground-sizeرا انیمیت کن.
اگر گرادیان‌ها و افکت‌های طرح فیگمایت باید دقیق و سبک در سایت پیاده شوند، تبدیل فیگما به HTML را ببین. برای تبدیل کد رنگ‌ها بین HEX، RGB و HSL هم مبدل رنگ را داریم.