چه نوع گرادیانهایی میتوانم بسازم؟

گرادیانهای خطی، شعاعی و مخروطی با ۲ تا ۶ نقطهٔ رنگ. برای خطی و مخروطی زاویه را تعیین کنید، و برای شعاعی شکل و اندازه را.

آیا میتوانم کد Tailwind یا SCSS بگیرم؟

بله. آن را بهصورت CSS ساده، CSS با رنگ یکدست جایگزین، کلاس مقدار دلخواه Tailwind یا متغیر SCSS کپی کنید.

چگونه گرادیان را ذخیره یا به اشتراک بگذارم؟

گرادیان در پیوند صفحه ذخیره میشود، پس میتوانید آن را نشانک کنید یا پیوند را برای کسی بفرستید تا همان گرادیان را ببیند.

آیا واقعاً رایگان است؟

بله. همه ابزارها رایگان هستند، بدون حساب کاربری و بدون کارت اعتباری. پردازش بهجای سرورهای ما روی دستگاه شما انجام میشود و همین است که رایگان ماندن آن را ممکن میکند.

آیا در موبایل کار میکند؟

بله. روی مرورگرهای امروزی موبایل در iOS و اندروید اجرا میشود و نیازی به نصب چیزی نیست.

🌈

تولید گرادیان CSS رایگان

گرادیان‌های CSS خطی، شعاعی و مخروطی با پیش‌نمایش زنده ایجاد کنید. CSS را با یک کلیک کپی کنید.

در مرورگر شما اجرا می‌شودبدون ثبت‌نام، بدون پاپ‌آپورود لازم نیسترایگان برای همیشه

پس از بارگذاری آفلاین کار می‌کند

background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

نوع

زاویه: 135°

ترکیب نرم (OKLCH)

از نقاط میانی خاکستری بین رنگ‌های بسیار متفاوت جلوگیری می‌کند. یک خط ساده sRGB هم برای مرورگرهای قدیمی‌تر به‌عنوان جایگزین اضافه می‌شود.

جابه‌جایی طیف رنگ همهٔ نقاط: 0°

توقف‌های رنگ

100%

پیش‌تنظیم‌ها

کاربردهای رایج

ایجاد شیب‌ها برای بخش‌های قهرمانطراحی پس‌زمینه‌های شیب صفحه کامل برای بخش‌های قهرمان سایت و صفحات فرود.
ایجاد دکمه‌های شیب و CTAطراحی پس‌زمینه‌های دکمه شیب جذاب برای فراخوان‌های کنش که برجسته باشند.
ایجاد پس‌زمینه‌های شیب برای کارت‌هاطراحی پر‌کردن‌های شیب برای کارت‌ها، مدال‌ها، نوارهای جانبی و پس‌زمینه‌های اجزای رابط کاربری.
ایجاد شیب‌ها برای گرافیک‌های رسانه‌های اجتماعیطراحی پس‌زمینه‌های شیب زنده برای پست‌های Instagram، تصاویر کوچک YouTube و کارت‌های Twitter.
ایجاد مقیاس‌های رنگ برای نمودارهاتولید مقیاس‌های رنگ شیب برای نقشه‌های حرارتی، نوارهای پیشرفت و تجسم داده‌ها.

نحوه کار

سازنده گرادیان رشته‌های گرادیان CSS را مستقیماً در مرورگر می‌سازد — بدون کتابخانه، بدون سرور، بدون آپلود. یک تابع دست‌نویس سینتکس درست linear-gradient، radial-gradient، یا conic-gradient را از توقف‌های رنگ و زاویه شما در زمان واقعی می‌سازد، سپس نتیجه را برای هر هدف خروجی که انتخاب می‌کنید قالب‌بندی می‌کند.

1
توقف‌ها و جهت را پیکربندی کنید
بین ۲ تا ۶ توقف رنگ با استفاده از انتخاب‌گر رنگ بومی مرورگر تنظیم می‌کنید، سپس هر توقف را در طول محور ۰ تا ۱۰۰٪ با یک لغزنده محدوده موقعیت می‌دهید. برای گرادیان‌های خطی و مخروطی یک زاویه (۰ تا ۳۶۰°) هم انتخاب می‌کنید؛ برای گرادیان‌های شعاعی شکل (بیضی یا دایره) و کلیدواژه اندازه که کنترل می‌کند گرادیان تا کجا گسترش می‌یابد را انتخاب می‌کنید.
2
buildCss رشته گرادیان را می‌سازد
در هر تغییر، یک تابع محلی buildCss پارامترهای شما را در فراخوانی تابع درست CSS به هم متصل می‌کند — مثلاً linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). کتابخانه‌ای دخیل نیست؛ رشته با منطق قالب جاوااسکریپت خالص ساخته و مستقیماً از آرایه توقف متصل می‌شود.
3
پیش‌نمایش زنده از طریق استایل درون‌خطی رندر می‌شود
رشته گرادیان ساخته‌شده مستقیماً به یک عنصر div به‌عنوان استایل پس‌زمینه درون‌خطی اعمال می‌شود، پس موتور CSS خود مرورگر پیش‌نمایش را رندر می‌کند. بومی یا تصویری دخیل نیست — آنچه می‌بینید تحت‌اللفظی همان ویژگی CSS در حال اعمال است.
4
خروجی آماده-کپی در چهار فرمت
یک انتخاب‌گر فرمت همان رشته گرادیان را به CSS ساده (background: ...)، یک بلوک CSS-با-بازگشت-جامد، یک کلاس مقدار-دلخواه Tailwind، یا یک اعلان متغیر SCSS تبدیل می‌کند. کلیک روی کپی خروجی انتخابی را از طریق navigator.clipboard.writeText در کلیپ‌بورد می‌نویسد. گرادیان فعلی نیز در هش URL کدگذاری می‌شود پس می‌توانید آن را نشان‌گذاری یا به اشتراک بگذارید.