---

گرادیان CSS چیست؟

گرادیان‌های CSS به شما امکان می‌دهند بدون استفاده از فایل‌های تصویری، انتقال‌های نرم بین دو یا چند رنگ را نمایش دهید. سه نوع دارند: linear-gradient (در امتداد یک خط مستقیم)، radial-gradient (تشعشع از یک نقطه مرکزی) و conic-gradient (چرخش دور یک نقطه مرکزی). گرادیان‌ها برای پس‌زمینه‌ها، دکمه‌ها، لایه‌ها و عناصر تزئینی استفاده می‌شوند.

نحوه استفاده از تولیدکننده گرادیان CSS

1. یک پیش‌تنظیم از نمونه‌ها انتخاب کنید یا گرادیان خود را پیکربندی کنید.

2. نوع گرادیان را انتخاب کنید: linear، radial یا conic.

3. زاویه (برای linear/conic) یا شکل (برای radial) را تنظیم کنید.

4. توقف‌های رنگ را ویرایش کنید — رنگ‌ها و موقعیت‌ها (0–100%) را تغییر دهید.

5. توقف‌های رنگ را در صورت نیاز اضافه یا حذف کنید.

6. CSS را کپی کرده و در استایل‌شیت خود جای‌گذاری کنید.

سوالات متداول

چگونه یک شیب شفاف ایجاد کنم؟ از مقادیر رنگی rgba() یا hsla() با کانال آلفا 0 برای شفافیت کامل استفاده کنید. به عنوان مثال، یک نقطه رنگی rgba(0,0,0,0) سیاه کاملاً شفاف است، که برای پوشش های محو شدن روی تصاویر مفید است.

چگونه یک نقطه رنگی سخت (بدون انتقال) ایجاد کنم؟ دو نقطه رنگی را در همان موقعیت قرار دهید — یکی پایان می یابد و یکی در آن نقطه شروع می شود. به عنوان مثال، red 50%, blue 50% یک تغییر فوری از قرمز به آبی در نقطه میانی را بدون انتقال شیب ایجاد می کند.

کدام مرورگرها از شیب های مخروطی پشتیبانی می کنند؟ شیب های مخروطی در تمام مرورگرهای مدرن پشتیبانی می شوند (Chrome 69+، Firefox 83+، Safari 12.1+، Edge 79+). در Internet Explorer پشتیبانی نمی شوند.

آیا می توانم از چندین شیب بر روی یک عنصر استفاده کنم؟ بله. CSS background یک لیست اقلام جدا شده با کاما را می پذیرد. می توانید شیب ها را روی هم قرار دهید، آنها را با تصاویر پس زمینه ترکیب کنید، و موقعیت و اندازه هر لایه را به طور مستقل کنترل کنید.

Keywords: تولیدکننده گرادیان CSS، گرادیان خطی، گرادیان شعاعی، گرادیان مخروطی، تولیدکننده پس‌زمینه CSS، انتخابگر رنگ گرادیان، ابزار گرادیان CSS