ابزار ایجاد گرادیانت برای سایت

طیف رنگی دلخواه خود را به سادگی ایجاد کرده و کد css آن را دریافت کنید.

به کمک این ابزار ساده و جذاب، می توانید یک طیف رنگ (Gradient) خاص بین 2 تا 4 رنگ را به صورت خطی و یا شعاعی برای سایت خود ایجاد کرده و با کلیک بر روی دکمه ایجاد گرادیانت، کد css ساخته شده را برای استفاده در سایت خود کپی کنید. همچنین هر بار کلیک بر روی دکمه گرادیانت تصادفی، بر اساس تعداد رنگ ها و حالات انتخابی، رنگ های مختلفی را برای شما انتخاب می کند.

وارد کردن مقدار رنگ ها

نتیجه نهایی

کد css برای استفاده در بک گراند

background-image:

کد CSS برای استفاده در متن

به منظور اینکه بتوانید گرادیانت ساخته شده را برای متن به کار ببرید (مشابه کلمه گرادیانت در بالای همین صفحه)، دو خط زیر را نیز باید به کدهای خود اضافه کنید.

background-clip: text; -webkit-text-fill-color: transparent;

ابزار ایجاد گرادیانت

ابزار ایجاد گرادیانت و دریافت کد CSS

به راحتی کد css برای ساخت گرادیانت دلخواه خود را ایجاد کنید.

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

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

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

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

آخرین مقالات بلاگ کلیک اول

آخرین آموزش ها و مقالات مربوط به سئو و دیجیتال مارکتینگ