ساخت گرادیان CSS

ساختن گرادیان با کد نوشتن یعنی: یه زاویه بزن، مرورگر رو رفرش کن، ببین بد شد، برگرد عوضش کن. اینجا لازم نیست. نوع گرادیان رو انتخاب کن، رنگ‌ها رو بکش، و همون لحظه ببین چی درمیاد — بعدش کد آماده رو بردار.

سه نوع گرادیان داری

• خطی (linear): رنگ‌ها تو یه خط مستقیم محو می‌شن. زاویه‌شو هرجور بخوای بچرخون. پرکاربردترین حالت برای پس‌زمینه و دکمه.
• شعاعی (radial): رنگ‌ها از یه نقطه به بیرون پخش می‌شن، دایره‌ای یا بیضی. برای افکت نور و هاله خوبه.
• مخروطی (conic): رنگ‌ها دور یه نقطه می‌چرخن، مثل چرخ رنگ. تنها راهیه که می‌تونی باهاش حلقه پیشرفت یا نمودار دایره‌ای بسازی — با اون دو تای دیگه نمی‌شه.

چطوری کار می‌کنه

1. نوع گرادیان رو انتخاب کن.
2. برای خطی و conic، اسلایدر زاویه رو بکش. برای شعاعی، شکل (دایره یا بیضی) و نقطه شروع رو مشخص کن.
3. رنگ‌ها رو اضافه کن، حذف کن یا جاشون رو عوض کن. محدودیت دو رنگ نداری — هرچقدر خواستی بذار.
4. اگه می‌خوای الگو تکرار بشه، گزینه گرادیان تکرارشونده رو بزن.
5. کد CSS، کلاس Tailwind یا متغیر SCSS رو از کادر خروجی بردار.

حوصله تنظیم دستی نداری؟ یکی از پیش‌تنظیم‌های آماده (اقیانوس، غروب، رنگین‌کمان و بقیه) رو بزن و از همونجا ادامه بده.

چرا گرادیانم پله‌پله دیده می‌شه؟

به این حالت می‌گن بندینگ و توی گرادیان‌های بزرگ و تیره خیلی پیش میاد، مخصوصاً روی بعضی مانیتورها. راه‌حلش ساده‌ست: گزینه «افزودن نویز» رو فعال کن. یه لایه دونه‌دونه خیلی ظریف روی گرادیان می‌ذاره که چشم دیگه پله‌ها رو تشخیص نمی‌ده. همون ترفندی که تو اکثر سکشن‌های هیرو حرفه‌ای استفاده می‌شه.

کجا به کارت میاد

• پس‌زمینه سکشن هیرو یا دکمه اصلی سایت، بدون اینکه فیگما باز کنی.
• حلقه پیشرفت یا نمودار دایره‌ای، با گرادیان conic.
• پس‌زمینه راه‌راه برای بنر و کارت، با حالت تکرارشونده.
• وقتی یه گرادیان قشنگ تو فیگما یا دریبل دیدی و می‌خوای همونو تو کد پیاده کنی.

خروجی Tailwind

کادر Tailwind یه کلاس آماده بهت می‌ده، چیزی مثل bg-[linear-gradient(...)] که مستقیم می‌چسبونی تو کلاس المنت. لازم نیست چیزی رو دستی تبدیل کنی.