پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-dew-wrap"><span class="radikalwp-dew-text">طراحی با کلاس<//span><//div>
.radikalwp-dew-wrap { text-align: center; }
.radikalwp-dew-text {
  display: inline-block;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.7;
  background: linear-gradient(180deg, #1e3a8a 0%, #3b82f6 55%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter .3s ease;
}
.radikalwp-dew-text:hover { filter: brightness(1.15); }
.radikalwp-dew-text::after {
  content: '';
  display: block;
  width: 120px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

درباره این اسنیپت

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

پرسش‌های متداول

سه نقطه رنگ در linear-gradient از تیره به روشن چیده شده‌اند. هر سه را با پالت خود عوض کنید تا حس شفافیت حفظ شود.

برای زمینه تیره بهتر است نقطه پایانی گرادیان را روشن‌تر کنید تا کنتراست و خوانایی متن حفظ شود.

شبه‌المان ::after خط گرادیانی را می‌سازد. حذف آن متن را تمیز و بدون خط نگه می‌دارد.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

خلاقیت بی‌مرز

پیش‌نمایش زنده اسنیپت

متن گرادیان جاری

متن گرادیان تیتر
۱۰۰
۴.۲ (۱۶)

خوش آمدید

پیش‌نمایش زنده اسنیپت

متن گرادیان رنگین

متن گرادیان تیتر
۶۰
۴.۵ (۹)

رادیکال‌دبلیوپی

پیش‌نمایش زنده اسنیپت

متن گرادیان متحرک

متن گرادیان تیتر
۴۵
۴.۷ (۷)