ساخت گرادیانت CSS
رنگ‌ها و زاویه را انتخاب کنید، پیش‌نمایش را ببینید و CSS پس‌زمینه را کپی کنید.
CSS
ساخت آنلاین گرادیانت CSS
پس‌زمینه‌های گرادیانت در بخش اصلی بالای صفحه (hero)، دکمه‌ها، کارت‌ها و لایه‌های روی عکس به کار می‌روند. این صفحه مولد CSS را روی زبانه گرادیانت باز می‌کند تا زاویه‌ها و رنگ‌ها را با چشم امتحان کنید و دقیقاً همان خط CSS را کپی کنید.
نمونه‌ها
| CSS | نتیجه |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | بنفش در چپ تا سبز در راست |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | تیره شدن تدریجی در پایین، برای خوانا ماندن متن روی عکس |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | لکه نور ملایم در مرکز |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | نمودار دایرهای با یک ربع جدا |
نکته‌ها
رنگ‌هایی که روی چرخه رنگ به هم نزدیک‌اند نرم با هم ترکیب میشوند؛ رنگ‌های روبه‌رو معمولاً در میانه خاکستری میشوند و یک رنگ اضافه میان آن‌ها این مشکل را حل می‌کند. کنتراست متن را هم در نظر داشته باشید: روشن‌ترین و تیره‌ترین بخش گرادیانت را با رنگ متن مقایسه کنید.
ابزارهای مرتبط
برای سایه زیر همان عنصر، ساخت سایه box-shadow را ببینید. برای تبدیل رنگ به HEX، RGB یا HSL از مبدل رنگ استفاده کنید.