UTILS.
حریم خصوصی از ابتدا
▤

سازنده گرادیان CSS

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

فایل‌هایتان در همین دستگاه می‌مانند

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

با گزینهٔ دانلود، این ابزار را در یک فایل HTML ذخیره کنید تا آفلاین استفاده شود.

حریم خصوصی →

یک مثال حل‌شده را امتحان کنید

مثال

نوع خطی را انتخاب کنید، زاویه را 135 و رنگ‌ها را #ff7e5f و #feb47b بگذارید. CSS برابر background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); است. اگر نقطه توقف اول را به 20 ببرید، رنگ اول در 20% ابتدای کادر یکدست می‌ماند.

به یاد داشته باشید

0deg رو به بالا و 90deg رو به راست است، پس 135deg از گوشه بالا چپ تا پایین راست کشیده می‌شود. اگر متنی روی گرادیان قرار دارد، کنتراست آن را با هر دو رنگ دو سر بررسی کنید.

درباره این ابزار

با انتخاب رنگ‌ها، موقعیت‌ها و یک زاویه، یک گرادیان دو-رنگه‌ی خطی یا شعاعی بسازید و سپس قانون background را کپی کنید. پیش‌نمایش زنده کاملاً در مرورگر شما اجرا می‌شود.

پرسش‌های پرتکرار

زاویه در گرادیان خطی چیست؟
زاویه جهت گذار رنگ را تعیین می‌کند: ۰ درجه رو به بالا، ۹۰ درجه رو به راست، ۱۸۰ درجه رو به پایین و به همین ترتیب.
چه زمانی به‌جای خطی از شعاعی استفاده کنم؟
از حالت شعاعی برای پخش‌شدن رنگ‌ها از یک نقطه‌ی مرکزی به بیرون (مانند نورافکن) استفاده کنید؛ حالت خطی آن‌ها را در امتداد یک خط مستقیم ترکیب می‌کند.

ابزارهای بیشتر