این ابزار درست کار نمیکند؟
دربارهٔ ابزار «ساخت گرادیان CSS آنلاین»
این ابزار گرادیانهای خطی، شعاعی و مخروطی CSS را به صورت بصری میسازد. توقفگاههای رنگ اضافه کنید، جهت یا زاویه را انتخاب کنید، شفافیت را تنظیم کنید، و ابزار کد CSS متناظر را آماده برای چسباندن در شیوهنامه شما تولید میکند.
گرادیانها در طراحی وب مدرن همه جا هستند: پسزمینههای hero، حالتهای دکمه، لهجههای کارت، و متن گرادیانی. ساخت دستی نحو گرادیان CSS دستوپا گیر است — ویرایش بصری به شما اجازه میدهد با انتقالهای نرم بدون ویرایشهای آزمون و خطا آزمایش کنید.
خروجی از ویژگیهای مدرن مانند چندین توقفگاه رنگ، موقعیتیابی درصدی، درونیابی رنگ در فضاهای رنگی مختلف، و گرادیانهای مخروطی برای جلوههای دایرهای پشتیبانی میکند. به عنوان CSS یا به عنوان یک کلاس کاربردی Tailwind کپی کنید.
چطور از این ابزار استفاده کنم؟
چطور یک دستور CSS با linear-gradient دو-stop بسازم؟
stopها را انتخاب کنید
«Color 1» و «Color 2» هر رنگ CSS را میپذیرند: hex (`#1e3a8a`)، rgb (`rgb(30 58 138)`)، rgba با alpha، یا رنگهای نامگذاریشده (`navy`). stop اول در 0٪، دومی در 100٪.
زاویه را تنظیم کنید
«Angle (deg)» جهت گرادیان را به درجه کنترل میکند. `0` پایین→بالا، `90` چپ→راست، `180` بالا→پایین (پیشفرض CSS)، `45` قطر کلاسیک است.
«اجرا» را بزنید
خروجی یک فیلد `css` است: `linear-gradient(<angle>deg, <color1>, <color2>)`. مستقیماً بهعنوان مقدار `background:` یا `background-image:` بچسبانید.
فراتر از دو stop
برای radial، conic یا ۳+ stop، خروجی را بهصورت دستی ویرایش کنید — syntax `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)` است. یا به ویرایشگر گرادیان غنیتری بروید؛ این ابزار عمداً برای linear دو-stop ساده است.