نحوه استفاده
- نوع خطی، شعاعی یا مخروطی را انتخاب کنید، سپس زاویه یا موقعیت مرکز را تنظیم کنید.
- رنگ، شفافیت و موقعیت هر نقطه توقف را تنظیم کنید. حداکثر شش نقطه توقف اضافه کنید یا موارد غیرضروری را حذف کنید.
- پیش‌نمایش را بررسی کنید، سپس خط CSS را در استایل‌شیت خود کپی کنید.
نحوه کار
خروجی یک دستور background استاندارد CSS است. گرادیان‌های خطی در امتداد یک زاویه حرکت می‌کنند: 0deg از پایین به بالا می‌رود، 90deg از چپ به راست، 180deg از بالا به پایین. گرادیان‌های شعاعی از یک نقطه مرکزی به صورت دایره یا بیضی که متناسب با کادر است پخش می‌شوند. گرادیان‌های مخروطی حول یک نقطه مرکزی می‌چرخند و از زاویه انتخابی شروع می‌شوند که برای افکت‌های شبیه نمودار دایره‌ای و چرخه‌های رنگی مفید است.
نقاط توقف به ترتیب موقعیت‌شان نوشته می‌شوند، بنابراین می‌توانید موقعیت‌ها را آزادانه جابه‌جا کنید. یک نقطه توقف با کدورت کاهش‌یافته به صورت rgba() نوشته می‌شود که اجازه می‌دهد پس‌زمینه از پشت دیده شود. دو نقطه توقف در یک موقعیت، به جای ترکیب شدن، یک لبه تیز ایجاد می‌کنند که به این ترتیب راه‌راه‌ها ساخته می‌شوند.
هر سه تابع گرادیان در همه مرورگرهای فعلی کار می‌کنند. گرادیان‌ها به طور پیش‌فرض در فضای رنگی sRGB ترکیب می‌شوند که می‌تواند بین رنگ‌های مکمل (مثلاً آبی و زرد) کمی خاکستری به نظر برسد؛ افزودن یک نقطه توقف میانی با رنگی روشن‌تر از این امر جلوگیری می‌کند.
نمونه‌ها
پس‌زمینه ملایم هدر
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) یک محو نرم از بالا به پایین ایجاد می‌کند که متن تیره را خوانا نگه می‌دارد.
نوارهای با لبه تیز
از چهار نقطه توقف استفاده کنید: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. دو نقطه توقف در 50% بدون ترکیب به هم می‌رسند و دو نیمه یکدست می‌سازند.
جلوه نورافکن
یک گرادیان شعاعی (دایره در بالا سمت چپ) از rgba(255, 255, 255, 0.6) به rgba(255, 255, 255, 0) روی یک رنگ، نور ملایمی در گوشه ایجاد می‌کند.
پرسش‌های متداول
0deg به کدام سمت می‌رود؟
در CSS، 0deg به سمت بالاست؛ بنابراین گرادیان از پایین شروع و به بالا ختم می‌شود. 90deg از چپ به راست می‌رود. این با برخی از برنامه‌های طراحی که معمولاً 0° را چپ به راست در نظر می‌گیرند متفاوت است.
آیا می‌توانم گرادیان را روی متن اعمال کنم؟
بله: پس‌زمینه را اعمال کنید، سپس background-clip: text و color: transparent را اضافه کنید. بررسی کنید که متن در تمام نقاط گرادیان در برابر صفحه خوانا باقی بماند.
آیا به پیشوندهای مرورگر مانند -webkit-linear-gradient نیاز دارم؟
خیر. مرورگرهای فعلی از نحو بدون پیشوند پشتیبانی می‌کنند. پیشوندها فقط برای مرورگرهای بسیار قدیمی لازم هستند.
حریم خصوصی
همه چیز در مرورگر شما تولید می‌شود. رنگ‌ها و تنظیمات شما ارسال یا ذخیره نمی‌شوند.