اصطلاح گرادینت،Gradient در زمینه طراحی و گرافیک به معنای تدارج رنگ است. معنی لغوی این اصلاح، سطح شیب دار یا شیب است.

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

گرادینت‌ها به شکل های مختلفی مانند، عمودی، مورب، زاویه دار، مدور، افقی و … مورد استفاده قرار می گیرند.

واضح است که گرادینت در طراحی وب، می تواند جلوه زیباتری به عناصر موجود در صفحات بدهد. اما پیش از بروز رسانی ابزار طراحی CSS3 طراحان نمی توانستند از گرادینت در طراحی وب استفاده نمایند.

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