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

ابزار آنلاین ساخت گرادینت CSS (CSS Gradient Generator)

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

background-color: #2563eb;
background-image: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);

۱. گرادینت خطی (Linear Gradient)

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

background: linear-gradient(to right, red, yellow);

to right یعنی رنگ اول از سمت چپ شروع می‌شه و به‌سمت راست به رنگ دوم می‌رسه. از to left، to top و to bottom هم می‌تونی استفاده کنی.

تعیین زاویه با deg

background: linear-gradient(45deg, blue, green);

در گرادینت خطی، 0deg به‌سمت بالا و 90deg به سمت راست اشاره می‌کنه؛ پس 45deg جهت بالا و راست رو نشون می‌ده. زاویه رو در ابزار بالا جابه‌جا کن تا بدون نوشتن چند نمونه کد، تفاوت جهت رنگ‌ها رو ببینی.

۲. گرادینت شعاعی (Radial Gradient)

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

background: radial-gradient(circle, red, yellow, green);

/* شکل بیضوی */
background: radial-gradient(ellipse, blue, lightblue);

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

جابه‌جایی مرکز گرادینت

background: radial-gradient(circle at 25% 30%, #facc15, #7c3aed);

کلیدواژه at محل مرکز گرادینت رو مشخص می‌کنه؛ اینجا ۲۵ درصد از عرض و ۳۰ درصد از ارتفاع عنصره. مثلاً می‌تونی با همین روش یک نقطه روشن روی پس‌زمینه کارت بسازی.

۳. گرادینت مخروطی (Conic Gradient)

در گرادینت مخروطی، رنگ‌ها به‌جای حرکت از مرکز به بیرون، دور یک نقطه می‌چرخن. این مدل برای چرخه رنگ یا نمودارهای دایره‌ای کاربرد داره.

background: conic-gradient(from 0deg, red, yellow, green);

from 0deg شروع زاویه رو از بالای عنصر تعیین می‌کنه و تغییر رنگ در جهت عقربه‌های ساعت پیش می‌ره. برای دیدن این تفاوت، نوع Conic رو در ابزار انتخاب کن.

۴. کنترل محل رنگ‌ها با Color Stops

توی هر گرادینت می‌تونی مشخص کنی هر رنگ از کجای مسیر شروع یا در چه نقطه‌ای قرار بگیره. به این موقعیت‌ها Color Stop می‌گیم:

background: linear-gradient(to bottom, red 0%, yellow 50%, green 100%);

در مثال بالا، قرمز اول مسیره، زرد وسط و سبز انتهای اون. اگه محل پایان دو رنگ رو یکسان تنظیم کنی، به‌جای تغییر نرم می‌تونی یک مرز تیز بسازی:

background: linear-gradient(to right, #2563eb 0% 50%, #f97316 50% 100%);

با اسلایدرهای موقعیت رنگ اول و دوم در ابزار بالا، مقدار فاصله بین رنگ‌ها رو تغییر بده و نتیجه رو ببین. برای ساخت مرز کاملاً تیز، به مقداردهی چند توقف رنگ در CSS نیاز داری؛ ابزار فعلی فاصله حداقل ۱٪ نگه می‌داره.

۵. ساخت گرادینت تکرارشونده

اگه می‌خوای خط‌های راه‌راه یا یک الگوی تکراری بسازی، از خانواده repeating-*-gradient() استفاده کن:

background: repeating-linear-gradient(
  45deg,
  #2563eb 0px 12px,
  #dbeafe 12px 24px
);

توی این مثال، یک الگوی ۲۴ پیکسلی مدام تکرار می‌شه. توابع repeating-radial-gradient() و repeating-conic-gradient() هم وجود دارن. برای آزمایش، حالت «تکرارشونده» رو انتخاب کن و موقعیت دو رنگ رو نزدیک‌تر بذار.

۶. ساخت گرادینت نیمه‌شفاف

برای اینکه گرادینت نیمه‌شفاف باشه، می‌تونی از رنگ‌های دارای کانال آلفا استفاده کنی. در rgba() مقدار 0 کاملاً شفافه و 1 کاملاً ماته:

background: linear-gradient(
  to right,
  rgba(255, 0, 0, 0.5),
  rgba(0, 0, 255, 0.5)
);

این مدل وقتی به کارت میاد که بخوای عکس یا رنگِ زیر گرادینت همچنان دیده بشه. ابزار فعلی فقط رنگ‌های شش‌رقمی HEX می‌پذیره؛ برای شفافیت از کد همین بخش استفاده کن.

۷. قرار دادن گرادینت روی تصویر

فرض کن روی یک عکس، عنوان سفید گذاشتی ولی بعضی قسمت‌های عکس روشنن و متن خوب دیده نمی‌شه. می‌تونی یک گرادینت نیمه‌شفاف روی عکس بذاری تا پایین تصویر تیره‌تر بشه:

.hero {
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.1)),
    url("example.jpg");
  background-size: cover;
  background-position: center;
}

۸. گرادینت در دکمه و کارت

.hero-banner {
  background: linear-gradient(125deg, #155ca7 0%, #5943a6 58%, #9b4dc2 100%);
  color: #fff;
  padding: 42px;
  border-radius: 18px;
}

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

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

.gradient-button {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

کارت با پس‌زمینه ملایم

.gradient-card {
  background: linear-gradient(135deg, #eff6ff, #ddd6fe);
  padding: 24px;
  border-radius: 16px;
}

رنگ‌ها رو با هویت بصری پروژه خودت هماهنگ کن و مطمئن شو متن روی تمام قسمت‌های گرادینت خواناست.

۹. گرادینت و فضای رنگی OKLCH

در CSS جدید می‌تونی مشخص کنی رنگ‌ها در چه فضای رنگی با هم ترکیب بشن. مثلاً oklch برای بعضی ترکیب‌ها تغییر رنگ یکنواخت‌تری ایجاد می‌کنه:

background: linear-gradient(in oklch to right, blue, red);

این روش با گرادینت معمولی فرق داره. قبل از استفاده در پروژه واقعی، مستندات linear-gradient در MDN و پشتیبانی مرورگرها رو بررسی کن.

۱۰. اشتباهات متداول و سازگاری مرورگرها

قرار دادن گرادینت در ویژگی اشتباه

/* نادرست */
background-color: linear-gradient(red, blue);

/* صحیح */
background-image: linear-gradient(red, blue);

بی‌توجهی به خوانایی و رنگ جایگزین

اگه روی گرادینت متن داری، باید در همه قسمت‌های پس‌زمینه خوانا بمونه. معیار WCAG AA برای متن معمولی نسبت کنتراست ۴٫۵ به ۱ و برای متن بزرگ ۳ به ۱ است. بهتره یک رنگ ساده هم به‌عنوان پس‌زمینه جایگزین بذاری:

.box {
  background-color: #2563eb;
  background-image: linear-gradient(90deg, #2563eb, #9333ea);
}

گرادینت‌های خطی و شعاعی توی مرورگرهای جدید پشتیبانی خوبی دارن. برای Conic و روش‌های تازه ترکیب رنگ، پشتیبانی مرورگر هدف رو جدا بررسی کن. منابع: CSS Gradients و Conic Gradients در Can I Use.

۱۱. تمرین عملی

برای تمرین، این سه کار رو توی ابزار ابتدای صفحه انجام بده و کد خروجی رو در یک فایل HTML امتحان کن:

1. یک گرادینت خطی با زاویه ۱۳۵ درجه بساز و ببین رنگ‌ها به چه سمتی تغییر می‌کنن.
2. حالت شعاعی رو انتخاب کن و مرکز رو روی ۲۵٪ عرض و ۳۰٪ ارتفاع بذار.
3. حالت تکرارشونده رو روشن کن و با تغییر Color Stopها یک الگوی مشخص بساز.

جمع‌بندی

برای انتخاب گرادینت، اول مشخص کن رنگ‌ها باید در امتداد یک خط تغییر کنن، از مرکز به بیرون پخش بشن یا دور یک نقطه بچرخن. بعد زاویه، مرکز و Color Stopها رو تنظیم کن. هر وقت به نتیجه دلخواه رسیدی، کد رو از ابزار کپی کن.

منابع تکمیلی

• راهنمای CSS Gradients در MDN
• مستندات Conic Gradient در MDN
• مستندات OKLCH در MDN
• استانداردهای CSS در W3C