نکات کلیدی
- 01هر سه نوع CSS gradient — خطی، شعاعی و مخروطی — با پیشنمایش زنده پشتیبانی میشوند.
- 02تا شش ایست رنگ را اضافه کنید، هر کدام با موقعیت و رنگ مستقل.
- 03خروجی یک declaration پسزمینه کامل است که برای جا دادن در هر stylesheet آماده است.
- 04بدون ثبتنام، بدون نصب و هیچ چیز آپلود نشده — همه چیز در مرورگر شما اجرا میشود.
چرا از یک تولیدکننده Gradient بصری استفاده کنیم؟
نوشتن CSS gradients به دست سریع خستهکننده میشود. جملات ساختاری هستند وقتی آنها را میدانید، اما انتخاب موقعیتهای دقیق ایست و رنگ بدون پیشنمایش بصری یک تصمیم طراحی ساده را به سعی و خطا در DevTools تبدیل میکند. ژنراتور به شما اجازه میدهد نتیجه را در زمان واقعی ببینید و کد تمیز را در لحظهای که درست به نظر میرسد صادر کنید.
این ابزار هر سه نوع gradient مدرن را پشتیبانی میکند. Linear جریان جهتی کلاسیک است که برای پسزمینههای قهرمان و دکمهها استفاده میکنید. Radial به بیرون از یک نقطه پخش میشود — برای اثرات روشنایی نقطهای و vignetteها عالی است. Conic اطراف مرکز میپیچند، که آن را ابزار رفتاری برای قطعات نمودار پای، چرخهای رنگ و شاخصهای spinner میکند. از یکی از پیشتنظیمات داخلی (Lime Swiss، Sunset، Sky، Aurora) شروع کنید یا از ابتدا طراحی کنید.
نحوه تولید CSS Gradient
کل فرآیند کمتر از یک دقیقه طول میکشد.
- 01
نوع gradient را انتخاب کنید
Linear، Radial یا Conic را از انتخابکننده نوع انتخاب کنید. برای خطی، زاویه را نیز تنظیم کنید. پیشنمایش بیدرنگ تحدیث میشود.
- 02
ایستهای رنگ را اضافه و موقعیت دهید
بر روی Add Stop کلیک کنید تا یک ایست جدید درج کنید، سپس اسلایدر آن را بکشید یا درصد درج کنید. تا شش ایست پشتیبانی میشوند — ایستها به صورت خودکار بر اساس موقعیت مجدد مرتب میشوند.
- 03
رنگ هر ایست را انتخاب کنید
بر روی سواچ رنگ کلیک کنید تا انتخابکننده رنگ سیستم را باز کنید یا مقدار hex را به صورت مستقیم درج کنید. فرمتهای RGB و hex هر دو کار میکنند.
- 04
در پیشنمایش زنده
پنل پیشنمایش gradient شما را با استفاده از موتور gradient بومی مرورگر رندر میکند، بنابراین نتیجه دقیقاً با آنچه CSS در تولید تولید میکند مطابقت دارد.
- 05
declaration CSS را کپی کنید
بر روی Copy کلیک کنید تا declaration background: linear-gradient(...) کامل را دریافت کنید. آن را در stylesheet، یک مولفه styled یا یک مقدار دلخواه Tailwind مانند bg-[<value>] جا دهید.
موارد استفاده رایج Gradient
هر نوع gradient در سناریوی مختلف عالی است.
- 01پسزمینههای بخش قهرمان — gradient خطی در 135° برای یک sweep مورب مدرن.
- 02حالتهای hover دکمه — gradient خطی دو ایست ظریف برای عمق.
- 03spotlight یا vignette شعاعی — radial تاریک تا شفاف بر روی overlay تصویر.
- 04نمودارهای پای و حلقههای پیشرفت — conic gradient با ایستهای سخت.
- 05پیشنمایشهای انتخابکننده چرخ رنگ — gradient conic طیف کامل.
- 06gradientهای متن — gradient را بر روی پسزمینه اعمال کنید، سپس از background-clip: text استفاده کنید.
کاملاً در مرورگر شما اجرا میشود
ژنراتور gradient 100% سمت کلاینت اجرا میشود — هیچ دادهای برای هیچ سرور ارسال نمیشود. پیشنمایش توسط موتور CSS خود مرورگر شما رندر میشود، به این معنی که آنچه میبینید با آنچه هر بازدیدکننده با CSS یکسان رندر میکند مطابقت دارد.
یک نکته عملی: کلاینتهای ایمیل هنوز پشتیبانی نامطمئن برای CSS gradients دارند. اگر gradient تولیدشده CSS را در یک قالب ایمیل HTML جا دهید، یک رنگ پسزمینه fallback قبل از declaration gradient اضافه کنید تا دریافتکنندگان بر روی کلاینتهای قدیمیتر چیز معقولی ببینند.
سؤالات متداول تولیدکننده CSS Gradient
تفاوت بین gradientهای خطی، شعاعی و مخروطی چیست؟
Gradientهای خطی در طول یک خط مستقیم در یک زاویه معین انتقال مییابند. Gradientهای شعاعی از یک نقطه مرکزی به بیرون پخش میشوند — برای برجستهها و اثرات نقطهای مفید است. Gradientهای مخروطی اطراف مرکز مانند عقربههای ساعت میپیچند — ایدهآل برای قطعات نمودار پای و چرخهای رنگ.
آیا میتوانم این را برای پروژههای Tailwind CSS استفاده کنم؟
بله. مقدار تولیدشده را کپی کنید و آن را به عنوان مقدار دلخواه Tailwind استفاده کنید، برای مثال: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind آن را در stylesheet خروجی شما قرار میدهد.
آیا پیشنمایش دقیقاً با آنچه من بر روی سایت زنده میبینم مطابقت دارد؟
بله — پیشنمایش توسط موتور gradient مرورگر یکسانی که CSS زنده شما را رندر میکند رندر میشود، بنابراین خروجی دقیق پیکسل است.
آیا میتوانم CSS gradients را در قالبهای ایمیل استفاده کنم؟
بیشتر کلاینتهای ایمیل CSS gradients را به صورت قابل اعتماد پشتیبانی نمیکنند. همیشه یک رنگ پسزمینه ثابت قبل از declaration gradient خود اضافه کنید به عنوان fallback.
آیا محدودیتی در تعداد ایستهای رنگ وجود دارد؟
ژنراتور تا شش ایست را پشتیبانی میکند. برای بیشتر طراحیها دو تا چهار کافی است؛ بیش از شش به جای افزودن غنای تری تمایل دارد تا وضوح را کاهش دهد.