گرادیان خطی، شعاعی و مخروطی CSS را دیداری بسازید و تنظیم کنید. کد CSS سازگار با مرورگرها را همان لحظه کپی کنید. رایگان و بدون ثبت‌نام.
background: #8B5CF6;
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]از پایه برای حریم خصوصی سخت‌گیرانه، اجرای فوری و بدون اصطکاک ساخته شده. بدون اشتراک، دیوار پرداخت یا ثبت‌نام.
ایستگاه رنگ را روی خط زمان دیداری اضافه، حذف و بکشید تا گرادیان چندرنگ دقیق مخلوط شود.
بین حالت خطی (جهت‌دار)، شعاعی (دایره‌ای) و مخروطی (جارویی) گرادیان CSS روان جابه‌جا شوید.
کد CSS سازگار با مرورگرها را خودکار می‌سازد، از جمله پیشوند فروشنده برای بیشترین پشتیبانی.
کاملاً با JavaScript سمت کاربر ساخته شده. بدون تأخیر سرور و بدون انتظار؛ فقط بازخورد دیداری آنی.
موتور محلی WebAssembly ما را با ابزارهای ابری قدیمی مقایسه کنید.
| ویژگی | Utiliome (مرورگر محلی) | مبدل‌های ابری قدیمی |
|---|---|---|
| انواع گرادیان | خطی، شعاعی، مخروطی | معمولاً فقط خطی |
| خروجی کد | CSS خام و کلاس Tailwind | فقط CSS پایه |
| کارایی | بوم HTML5 بدون تأخیر | بازترسیم کند DOM |
| هزینه | برای همیشه کاملاً رایگان | قابلیت ممتاز پشت دیوار پرداخت |
نیازی به نصب نرم‌افزار نیست. همه‌چیز مستقیم داخل مرورگر اجرا می‌شود.
روی ایستگاه رنگ در خط زمان کلیک کنید تا کد HEX آغاز و پایان را انتخاب کنید.
با صفحه زاویه گرادیان خطی را بچرخانید، یا برای فوران از مرکز به حالت شعاعی بروید.
دکمه کپی را بزنید تا کد قالب‌بندی‌شده background-image برای شیوه نامه برداشته شود.
پاسخ کوتاه: گرادیان CSS را مرورگر ریاضی می‌سازد، پس درخواست شبکه HTTP نمی‌خواهد، روی صفحه رتینا بدون پیکسلی مقیاس می‌گیرد و حجمش فقط چند بایت متن است.
یک دهه پیش طراح وب پس‌زمینه گرادیان را در Photoshop می‌ساخت، به تصویر JPG بزرگ برش می‌زد و الگوی تکرارشونده پس‌زمینه می‌گذاشت. این برای سئو بد بود، سرعت بار صفحه را نابود می‌کرد و روی نمایشگر ۴K پیکسلی دیده می‌شد.
مرورگر مدرن تابع CSS به نام linear-gradient() را آورد. چون این دستور ریاضی است نه تصویر ثابت، GPU مرورگر آمیزش رنگ را زنده رسم می‌کند. با سازنده Utiliome گرادیان پیچیده چندایستگاهی می‌سازید که آنی بار می‌شود و پویا با عرض صفحه موبایل یا دسکتاپ کاربر جور می‌شود.
پاسخ کوتاه: گرادیان خطی رنگ را روی خط راست مخلوط می‌کند (مثلاً از بالا به پایین). گرادیان شعاعی از یک نقطه مرکزی مثل دایره بیرون می‌زند. گرادیان مخروطی رنگ را دور محور مرکزی مثل نمودار دایره‌ای یا چرخه رنگ می‌چرخاند.
شناخت سه نوع اصلی گرادیان CSS انعطاف خلاقانه زیادی می‌دهد:
45deg یا to right bottom) تعریف می‌کنید و رنگ روی آن محور نرم گذار می‌کند.پاسخ کوتاه: ایستگاه رنگ دقیقاً مشخص می‌کند روی خط گرادیان یک رنگ کجا به بیشترین شدت برسد. با چند ایستگاه (مثلاً قرمز ۰٪، زرد ۵۰٪، آبی ۱۰۰٪) پس‌زمینه پیچیده چندنواره می‌سازید.
گرادیان پایه فقط دو رنگ می‌خواهد: آغاز و پایان. اما Utiliome اجازه می‌دهد ایستگاه رنگ نامحدود روی خط زمان بگذارید.
مثلاً اگر بنویسید linear-gradient(to right, red 0%, green 50%, blue 100%)، مرورگر تا نیمه صفحه از قرمز به سبز نرم گذار می‌کند و تا انتها از سبز به آبی.
می‌توانید «ایستگاه سخت» (خط تیز به‌جای آمیزش نرم) هم بسازید؛ دو رنگ متفاوت را به همان درصد بدهید (مثلاً red 50%, blue 50%). توسعه‌دهنده با این تکنیک الگوی راه‌راه و پرچم خالص CSS می‌سازد.
پاسخ کوتاه: می‌توانید گرادیان را مستقیم روی تایپوگرافی با ویژگی background-clip: text و -webkit-text-fill-color: transparent بگذارید تا پس‌زمینه گرادیان دقیقاً به شکل قلم بریده شود.
یکی از محبوب‌ترین روندهای طراحی وب مدرن، گرادیان زنده روی تایپوگرافی بزرگ است که بیشتر در سربرگ قهرمان H1 دیده می‌شود (رایج‌شده با Apple و Stripe).
برای این کار گرادیان استاندارد را با Utiliome بسازید اما با سه قاعده مشخص CSS اعمال کنید:
background-image: linear-gradient(...);-webkit-background-clip: text; background-clip: text;-webkit-text-fill-color: transparent;این‌طور متن کاملاً قابل انتخاب و مناسب سئو می‌ماند و در عین حال دیداری خیره‌کننده است.
پاسخ کوتاه: مرورگر مدرن گرادیان را بومی پشتیبانی می‌کند، اما مرورگر قدیمی (مثل نسخه‌های کهنه Safari و Internet Explorer) برای خواندن درست CSS پیشوند -webkit- و -moz- می‌خواست.
از نظر تاریخی نوشتن گرادیان CSS کابوس بود چون مشخصات نحو چند بار عوض شد. توسعه‌دهنده باید پنج خط مختلف می‌نوشت تا گرادیان در Firefox، Safari و Chrome رسم شود.
امروز نحو استاندارد linear-gradient() همه‌جا پذیرفته است. با این حال برای بیشترین ایمنی در اپ سازمانی که دستگاه موبایل قدیمی را پشتیبانی می‌کند، سازنده Utiliome می‌تواند پیشوند پشتیبان -webkit- را خودکار در کد خروجی تزریق کند.
پاسخ کوتاه: Tailwind CSS کلاس ابزاری آماده گرادیان دارد (مثلاً bg-gradient-to-r from-cyan-500 to-blue-500). در Utiliome گرادیان را دیداری طراحی می‌کنید و همان لحظه رشته کلاس Tailwind خروجی می‌گیرید.
اگر اپ React یا Next.js با Tailwind CSS می‌سازید، نوشتن ویژگی سفارشی style با CSS خام گردش‌کار ابزارمحور را می‌شکند.
Utiliome این فاصله را پر می‌کند. وقتی گرادیان روی بوم دیداری نهایی شد، گزینه خروجی Tailwind را انتخاب کنید. موتور کد HEX سفارشی را به مقدار دلخواه Tailwind نگاشت می‌کند (مثل from-[#ff0000] via-[#00ff00] to-[#0000ff]) و رشته کلاس قالب‌بندی‌شده می‌دهد که مستقیم در کامپوننت JSX می‌چسبد.
هرچه برای استفاده از ساخت گرادیان CSS رایگان و آنلاین Utiliome لازم است.
گرادیان را بسازید، سپس ویژگی CSS یعنی background-clip: text و -webkit-text-fill-color: transparent را اضافه کنید تا گرادیان دقیقاً به قلم بریده شود.
گرادیان مخروطی رنگ را دور محور مرکزی می‌چرخاند (مثل جاروب رادار یا نمودار دایره‌ای) نه روی خط راست.
بله. خروجی Utiliome زبانه Tailwind دارد که کلاس ابزاری دقیق (مثلاً bg-gradient-to-r from-red-500) را برای پروژه React و Next.js می‌سازد.
خیر. گرادیان CSS را GPU ریاضی رسم می‌کند. از تصویر پس‌زمینه بسیار بهتر است: بدون درخواست شبکه و فقط چند بایت داده.
بله، کاملاً رایگان و بدون محدودیت، تبلیغ یا ثبت‌نام حساب.