مولد گرادیان CSS
یک گرادیان خطی، شعاعی یا مخروطی را بهصورت دیداری طراحی کنید و کد CSS، Tailwind یا SCSS را فوراً کپی کنید.
نقاط توقف رنگ
پیشتنظیمها
دربارهٔ این ابزار
این ابزار چه کاری انجام میدهد
این ابزار بصری ساخت گرادیان CSS است: نوع گرادیان را انتخاب کنید، توقفهای رنگی را جابهجا کنید و ببینید پیشنمایش و کد تولیدشده همزمان بهروزرسانی میشوند. دیگر نیازی به تنظیمات دستی مکرر نیست linear-gradient() نحو و تازهسازی زبانهٔ مرورگر برای اینکه ببینید زاویه درست به نظر میرسد یا نه — اینجا آن را بهصورت زنده میبینید و میتوانید بهاندازهٔ نیاز طرح، توقفهای رنگی اضافه کنید؛ بدون اینکه به دو یا سه مورد محدود باشید.
نحوه استفاده
- انتخاب کنید خطی, شعاعی، یا مخروطی بهعنوان نوع گرادیان.
- برای گرادیانهای خطی و مخروطی، نوار لغزندهٔ زاویه را بکشید تا جهت را تعیین کنید. برای گرادیانهای شعاعی، یک شکل (دایره یا بیضی) و موقعیت شروع را انتخاب کنید.
- موقعیت هر توقف رنگ را اضافه، حذف یا با کشیدن تنظیم کنید — پیشنمایش فوراً بهروز میشود.
- روشن کردن گرادیان تکرارشونده برای کاشیوار کردن الگو، یا افزودن بافت دانهای/نویز برای شکستن نوارهای شدید رنگی در پسزمینههای بزرگ؛ ترفندی که بسیاری از گرادیانهای بخش قهرمان از آن استفاده میکنند.
- CSS آمادهٔ استفاده، کلاس مقدار دلخواه Tailwind یا متغیر SCSS را مستقیماً از کادرهای خروجی کپی کنید.
- یا کاملاً از کار دستی صرفنظر کنید و برای شروع، روی یکی از پیشتنظیمهای آماده (اقیانوس، غروب، چرخ رنگینکمانی و موارد دیگر) کلیک کنید.
کاربردهای واقعی
- ساخت پسزمینهٔ بخش قهرمان یا دکمهٔ فراخوان به اقدام، بدون باز کردن ابزار طراحی.
- ایجاد گرادیان مخروطی برای حلقهٔ پیشرفت سفارشی، بخش نمودار دایرهای یا انتخابگر چرخ رنگ.
- ایجاد الگویی از نوارهای مورب تکرارشونده برای پسزمینهٔ بنر یا کارت.
- تطبیق چشمی یک گرادیان از ماکاپ Figma یا Dribbble و سپس خروجی گرفتن از CSS تمیز برای استفاده در محصول.
سؤالات متداول
تفاوت گرادیانهای خطی، شعاعی و مخروطی چیست؟
گرادیان خطی رنگها را در امتداد یک خط مستقیم و با زاویهای انتخابی ترکیب میکند. گرادیان شعاعی رنگها را از یک نقطهٔ مرکزی بهصورت دایرهای یا بیضوی به سمت بیرون ترکیب میکند. گرادیان مخروطی رنگها را مانند چرخ رنگ یا نمودار دایرهای بهدور یک نقطهٔ مرکزی میچرخاند؛ برای ساخت چیزهایی مثل حلقههای پیشرفت و صفحههای مدرج کاربرد دارد که با دو نوع دیگر امکانپذیر نیست.
آیا میتوانم در یک گرادیان از بیش از دو رنگ استفاده کنم؟
بله. هرچند بار که لازم است روی «افزودن توقف رنگ» کلیک کنید و نوار لغزندهٔ موقعیت هر توقف را بکشید تا آن را در هر نقطهای از 0% تا 100% قرار دهید.
چطور یک گرادیان را تکرار یا کاشیوار کنم؟
کادر «گرادیان تکرارشونده» را علامت بزنید. با این کار خروجی به repeating-linear-gradient() (یا معادل شعاعی/مخروطی آن)، که توقفهای رنگی شما را در سراسر عنصر کاشیوار تکرار میکند، بهجای اینکه آنها را فقط یکبار کشیده کند.
چرا در گرادیانم نوارهای رنگی قابلمشاهده دیده میشود؟
گرادیانهای بزرگ و نرم، بهویژه گرادیانهای تیره به تیره، ممکن است در بعضی نمایشگرها پلهپله دیده شوند؛ این پدیده «باندینگ» نام دارد. فعالکردن گزینهٔ «افزودن بافت دانهای/نویز» یک لایهٔ ظریف نویز روی تصویر قرار میدهد که باندینگ را کاهش میدهد، بدون اینکه از نظر بصری حواسپرتکننده باشد.
آیا این ابزار با Tailwind CSS کار میکند؟
بله — کادر خروجی Tailwind یک کلاس با مقدار دلخواهِ آمادهٔ جایگذاری، مانند bg-[linear-gradient(...)] میتوانید آن را مستقیماً در نشانهگذاری خود قرار دهید.