شیب رنگ (Gradient) در CSS3

Linear gradient

شیب رنگ (Gradient) در CSS3، به شما اجازه می دهد تا، یک انتقال آرام بین دو یا چند رنگ مختلف را نمایش دهید.

پیش از این، برای داشتن اینگونه افکت ها، باید از تصاویر استفاده می کردیم. اما با استفاده از شیب رنگ در CSS3 می توانید زمان دانلود و پهنای باند استفاده شده را کاهش دهید. علاوه بر این چون شیب رنگ بوسیله مرورگر ایجاد می شود، زمانی که روی عناصر Zoom می کنید، شیب رنگ بهتر بنظر می آید.

در CSS3 دو نوع شیب رنگ تعریف شده است:

  • Linear Gradient یا شیب رنگ خطی: به صورت دو یا چند رنگ، پشت سر هم به حالت افقی، عمودی یا مورب
  • Radial Gradient یا شیب رنگ مدوّر (تابشی): به صورت دو یا چند رنگ تو در تو به صورت مدوّر