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

پیش‌نمایش
خروجی CSS
background: ;

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

نوع گرادیان
deg
ایست‌های رنگ برای افزودن ایست روی نوار کلیک کنید، برای جابجایی بکشید
ایست انتخاب‌شده
رنگ ایست
100%
%
پیش‌تنظیم‌ها

درباره تولیدکننده گرادیان CSS

تولیدکننده CSS Gradient گرادیان‌های linear، radial و conic را با کنترل بصری کامل می‌سازد. با کلیک روی نوار گرادیان، استاپ‌های رنگ اضافه کنید، آن‌ها را برای تغییر موقعیت بکشید و به هر استاپ رنگ، شفافیت و موقعیت مخصوص خودش را بدهید. گرادیان‌های خطی یک کنترل زاویه دارند؛ شعاعی‌ها یک شکل (دایره یا بیضی) و موقعیت؛ مخروطی‌ها یک زاویه شروع.

پیش‌نمایش زنده دقیقاً نشان می‌دهد مرورگر چه چیزی را رندر خواهد کرد، و یک دکمه تصادفی‌سازی به‌همراه مجموعه‌ای از پیش‌تنظیم‌های منتخب زمانی که به یک نقطه شروع نیاز دارید نه یک بوم خالی، در دسترس هستند. استاپ‌ها را می‌توان آزادانه اضافه یا حذف کرد — یک گرادیان فقط به حداقل دو تا نیاز دارد.

وقتی ظاهر درست شد، مقدار خام گرادیان یا یک قاعده کامل CSS را کپی کنید. این تولیدکننده کاملاً در مرورگر شما اجرا می‌شود بدون آپلود و بدون ثبت‌نام، و همراهی سریع برای دکمه‌ها، پس‌زمینه‌های هیرو، حاشیه‌ها و جلوه‌های متنی است.

نحوه استفاده از تولیدکننده گرادیان CSS

  1. نوع گرادیان را انتخاب کنید: خطی (linear)، شعاعی (radial) یا مخروطی (conic).
  2. زاویه (خطی)، شکل و موقعیت (شعاعی)، یا زاویه شروع (مخروطی) را تنظیم کنید.
  3. روی نوار گرادیان کلیک کنید تا استاپ‌های رنگ اضافه شوند و آن‌ها را به موقعیت درست بکشید.
  4. به هر استاپ رنگ، شفافیت و موقعیت دقیق آن را بدهید.
  5. پیش‌تنظیم‌ها یا دکمه تصادفی‌سازی را برای الهام سریع امتحان کنید.
  6. مقدار گرادیان یا قاعده کامل CSS را کپی کنید.

سوالات متداول

گرادیان‌های خطی رنگ‌ها را در امتداد یک خط راست با زاویه‌ای مشخص ترکیب می‌کنند. گرادیان‌های شعاعی از یک نقطه مرکزی به‌صورت دایره یا بیضی به بیرون تابیده می‌شوند. گرادیان‌های مخروطی رنگ‌ها را دور یک نقطه مرکزی می‌چرخانند — همان نوعی که پشت نمودارهای دایره‌ای و چرخ رنگ قرار دارد.

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

بله — هر استاپ کنترل شفافیت مخصوص خودش را دارد. استاپی با شفافیت ۰٪ گرادیان را محو می‌کند، که راه استاندارد ترکیب یک روکش رنگی روی یک عکس یا محو کردن یک بخش هیرو به داخل پس‌زمینه صفحه است.

نه مستقیماً — مرورگرها نمی‌توانند بین مقادیر گرادیان انتقال ایجاد کنند. ترفندهای معمول: انیمیت کردن background-position روی یک گرادیان بزرگ‌تر از حد، چرخاندن یک گرادیان مخروطی با یک custom property، یا محو متقابل دو عنصر لایه‌شده روی هم.

بله، رایگان و بدون محدودیت. کاملاً در مرورگر شما اجرا می‌شود، پس هیچ‌چیز از طراحی شما ذخیره یا ارسال نمی‌شود.

اشتراک‌گذاری

جستجوهای پرطرفدار
تولیدکننده گرادیان css تولیدکننده گرادیان خطی css گرادیان شعاعی css گرادیان مخروطی css سازنده گرادیان پس‌زمینه css ابزار ایست‌های رنگ گرادیان انتخاب‌کننده زاویه گرادیان css تولیدکننده گرادیان آنلاین
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.
گزارش مشکل

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.