تولیدکننده گرادیان CSS: خطی، شعاعی و مخروطی – رایگان
رایگان، بدون ثبت‌نام، در مرورگرتان کار می‌کند. گرادیان خطی، شعاعی یا مخروطی بسازید، زنده ببینید و کد CSS پس‌زمینه را کپی کنید یا آن را به‌صورت PNG با اندازه‌های HD، 4K یا بنر دانلود کنید.
نقاط رنگ
- 0%
- 100%
CSS
background: #ff7ac6; background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);
خط اول یک رنگ یکدست برای دستگاه‌های خیلی قدیمی است که گرادیانت را نشان نمی‌دهند.
شروع از یک الگو
روی دستگاه شما ساخته می‌شود.
چرا از تولیدکننده گرادیان CSS استفاده کنیم
- 100% رایگان
- هر چند وقت که بخواهید از آن استفاده کنید. بدون ثبت‌نام، بدون واترمارک و بدون نیاز به نصب.
- حریم خصوصی از ابتدا
- آنچه تایپ می‌کنید در مرورگر شما می‌ماند و هرگز برای ما ارسال نمی‌شود.
- روی هر دستگاهی کار می‌کند
- در مرورگر روی Windows، Mac، Linux، Android و iPhone اجرا می‌شود. نیازی به برنامه نیست.
طرز استفاده از تولیدکننده گرادیان CSS
- «نوع» را انتخاب کنید: خطی، شعاعی یا مخروطی. جهت را با نوار لغزان تنظیم کنید، یا برای گرادیان شعاعی «دایره» یا «بیضی» را انتخاب کنید.
- زیر «نقطه‌های رنگ»، هر رنگ را انتخاب یا کد آن را تایپ کنید و نوار لغزانش را بکشید تا محل آن مشخص شود. برای رنگ بیشتر، «افزودن نقطه» را تا 8 بزنید و «معکوس» ترتیب را برعکس می‌کند.
- یا روی یکی از پیش‌تنظیم‌های زیر «شروع از پیش‌تنظیم» کلیک کنید و از آنجا تغییرش دهید.
- روی «کپی CSS» کلیک کنید و در صفحه‌استایل بچسبانید، یا یک «اندازه تصویر» انتخاب کنید و روی «دانلود PNG» بزنید.
پرسش‌های متداول
چطور از CSS استفاده کنم؟
هر دو خط را در قاعده عنصری که می‌خواهید رنگی شود بچسبانید، مانند body یا یک دکمه. خط اول یک رنگ توپر پشتیبان است؛ خط دوم گرادیان است.
تفاوت خطی، شعاعی و مخروطی چیست؟
خطی روی یک خط راست محو می‌شود، شعاعی از مرکز در یک دایره یا بیضی پخش می‌شود، و مخروطی دور مرکز می‌چرخد، مانند چرخ رنگ یا نمودار دایره‌ای.
چطور جهت گرادیان خطی را عوض کنم؟
نوار «جهت» را از 0° تا 360° بکشید. 0° از پایین به بالا، 90° از چپ به راست، 180° از بالا به پایین است و 135° به‌صورت مورب به سمت راست پایین می‌رود.
گرادیان چند رنگ می‌تواند داشته باشد؟
از 2 تا 8 نقطه رنگ. هر نقطه موقعیتی از 0% تا 100% دارد؛ برای یک خط تیز میان رنگ‌ها به‌جای ترکیب تدریجی، دو نقطه را در یک موقعیت بگذارید.
آیا می‌توانم از شفافیت استفاده کنم؟
بله. رنگی مانند rgba(47, 91, 255, 0.5) یا کد HEX هشت‌رقمی در یک نقطه تایپ کنید تا گرادیان آنجا نیمه‌شفاف شود.
آیا می‌توانم گرادیان را به‌صورت تصویر دانلود کنم؟
بله. 1920 × 1080، 3840 × 2160، 1080 × 1080، 1080 × 1920 یا 1500 × 500 را انتخاب کنید و روی «دانلود PNG» بزنید؛ برای کاغذدیواری، اسلاید، پست شبکه اجتماعی یا هدر.
آیا CSS با Tailwind، React یا WordPress کار می‌کند؟
بله. کد CSS ساده است، پس آن را در یک کلاس در صفحه‌استایل خود (یا کادر CSS سفارشی) بگذارید و آن کلاس را به عنصر اضافه کنید. در هر مرورگر امروزی کار می‌کند.
آیا چیزی بارگذاری می‌شود؟
خیر. گرادیان‌ها روی دستگاه شما ساخته می‌شوند.
آیا تولیدکننده گرادیان CSS رایگان است؟
بله. استفاده از آن رایگان است، بدون ثبت‌نام و بدون نیاز به نصب.
راهنما و آموزش‌ها (به انگلیسی)
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
- Linear vs Radial vs Conic Gradient CSS (Free Generator)Linear gradients blend along a line, radial from a centre, conic sweep around it. Syntax, examples and when to use each in CSS, with a free gradient generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Holi Colors: Gulal Color Palette with HEX Codes (Free)Holi colours as HEX codes for posters, invites and social posts: gulal pink, marigold, kesari, green, blue, purple, with readable text. Free palette generator.
ابزارهای مرتبط
- تولیدکننده پالت رنگپالت پنجرنگی بسازید، رنگ‌ها را قفل کنید یا از رنگ خودتان طرح بسازید. 11 سایه هر رنگ را ببینید و خروجی CSS، Tailwind، JSON یا HEX بگیرید.
- مبدل رنگ HEX به RGBHEX را به RGB یا برعکس تبدیل کنید، با HEX، RGB، HSL، HSV و CMYK که با هم نشان داده می‌شوند و هر کدام دکمه کپی دارد.
- بررسیگر کنتراست رنگرنگ متن و پس‌زمینه را وارد کنید تا نسبت کنتراست WCAG و نتیجه AA و AAA را ببینید. اگر رد شد، نزدیکترین رنگ قبولشده را با یک کلیک بگیرید.