استفاده از CSS برای
تولید گرادیان های رنگی در عناصر استفاده شده در صفحات وب

top to bottom (default)
background-image: linear-gradient(red, yellow);
اگر جهت گرایان نوشته نشود به صورت پیشفرض چهت گرادیان از بالا به پایین خواهد بود.
left to right
background-image: linear-gradient(to right, red , yellow);
جهت گرادیان از چپ به راست تعیین شده است
top left to bottom right
background-image: linear-gradient(to bottom right, red, yellow);
می توان جهت گرادیان از یک گوشه به گوشه دیگر تعیین کرد
در کادر بالا جهت گرادیان به سمت گوشه پایین راست تعیین شده است.
180 deg
background-image: linear-gradient(180deg, red, yellow);
می توان جهت گرادیان را با استفاده از مقدار درجه تعیین کرد
در کادر بالا جهت گرادیان 180 درجه تعیین شده است
45 deg
background-image: linear-gradient(45deg, red, yellow);
می توان جهت گرادیان را با استفاده از مقدار درجه تعیین کرد
در کادر بالا جهت گرادیان 45 درجه تعیین شده است
Multicolor gradient
background-image: linear-gradient(red, yellow, green);
می توان برای ایجاد گرادیان از تعداد رنگ های بیشتری استفاده کرد.
در کادر بالا سه رنگ قرمز، زرد و سبز تعیین شده اما می توان تعداد رنگ ها را برحسب نیاز بیشتر کرد.
rainbow
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
در کادر بالا برای ایجاد گرادیان از هفت رنگ متفاوت استفاده شده است که رنگ های رنگین کمان هستند
توجه داشته باشید که برای تعیین رنگ از اسامی رنگ ها استفاده شده است.
می توان علاوه بر اسامی از کدهای دیگر مثل کدهای HEX یا کدهای rgb یا کدهای rgba استفاده کرد
Transparency
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
می توان شفافیت رنگ را نیز تغییر داد.
وقتی رنگ کاملا شفاف باشد رنگ زمینه به طور کامل دیده میشود و برحسب درجه شفافیت بخشی از رنگ زمینه دیده خواهد شد و اگر شفافیت صددرصد باشد رنگ تعیین شده به طور کامل خودش را نشان خواهد داد.
توجه داشته باشید که مقدار عددی داده شده میزان opacity را تعیین میکند که نقطه مقابل شفافیت است. وقتی opacity صفر است شفافیت 100% است و برعکس
در کادر بالا رنگ قرمز در سمت چپ دارای opacity:0 یعنی شفافیت 100% است اما به تدریج که به سمت راست کشیده میشود شفافیت کم میشود (چون opacity رنگ سمت راست برابر 1 میباشد).
در فرمول rgba(255,0,0,0) سه عدد اول نوع رنگ را تعیین میکنند rgb و عدد آخر مقدار رنگ را تعیین میکند
a:alpha و اگر a:0 باشد رنگ کاملا شفاف است و رنگ زمینه دیده میشود
و اگر a:1 باشد غلظت رنگ 100 درصد است و رنگ زمینه دیده نمیشود.
linear-gradient with steps
background-image: linear-gradient(red, yellow 10%, green 20%);
در کادر بالا محل ایستادن رنگ ها به صورت درصد تعیین شده است
محل ایستادن رنگ قرمز در اول یعنی 0% رنگ زرد در 10 درصد مسیر و رنگ سبز در 20 درصد مسیر تعیین شده است. بنابراین رنگ سبز ادامه پیدا کرده و 80 درصد باقیمانده را پر کرده است
Repeating a linear-gradient
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
در کادر بالا همان آرایش کادر قبلی را داریم اما به صورت تکراری
یعنی 80 درصد مسیر با تکرار گرادیان اول پر شده است.
Repeating a linear-gradient with smaller steps
background-image: repeating-linear-gradient(red, yellow 5%, green 10%, Snow 15%);
در کادر بالا همان آرایش کادر قبلی را داریم اما فاصله رنگ ها کوچکتر تعیین شده اند و رنگ Snow هم در موقعیت 15% اضافه شده است
و 85 درصد باقیمانده مسیر با تکرار گرادیان اول پر شده است.
radial gradient
background-image: radial-gradient(red, yellow, green);
گرادیان می تواند به صورت شعاعی باشد اگر برای محل ایستادن رنگ ها مقداری را تعیین نکرده باشیم رنگ اول در صفر و رنگ آخر در 100% قرار می گیرد و فاصله بینابینی به صورت مساوی تقسیم می گردد مثلا در کادر بالا رنگ زرد در محل 50% مسیر قرار گرفته است.
به صورت پیشفرض منظور از radial همان بیضی است و گرادیان به صورت بیضی ایجاد میشود و اگر بخواهیم گرادیان به صئرت دایره باشد باید تعیین کنیم
radial gradient with different steps
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
این گرادیان شعاعی همانند قبلی است ولی در اینجا محل ایستادن رنگ ها تعیین شده است و رنگ ها در فاصله های متفاوتی از قبلی قرار گرفته اند.
radial gradient as circle
background-image: radial-gradient(circle, red, yellow, green);
در کادر بالا گرادیان از نوع دایره (نه بیضی) رسم شده است
به نظر میرسد فقط عرض کادر برای تعیین محل قرار گیری رنگ ها استفاده شده است و دایره از بالا و پایین ناقص است.
radial gradient as circle
background-image: radial-gradient(circle, red, yellow, green);
در کادر بالا گرادیان از نوع دایره (نه بیضی) رسم شده است
در اینجا ارتفاع کادر به 800 پیکسل افزایش یافته است و دایره رنگ کامل ایجاد شده است.
radial gradient
width: 80px
radial gradient
width:160px
radial gradient
width:240px
radial gradient
width:320px;height:150px
background-image: radial-gradient(circle, red, yellow, green);
در اینجا همان کدهای قبلی را داریم
اما ارتفاع کادر متفاوت است. در سه تا کادر سمت چپ ارتفاع بیشتر از عرض است
ملاحظه می کنید که محل قرار گرفتن رنگ ها براساس ارتفاع تنظیم شده است چون ارتفاع بیشتر از پهنا است
در کادر سمت راست عرض بیشتر از ارتفاع است و گرادیان براساس عرض کادر تنظیم شده است
پس نتیجه می گیریم که عرض یا ارتفاع هر کدام بیشترین مقدار را داشته باشد برای ایجاد گرادیان استفاده میشود.
repeating radial gradient
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
و حرف آخر:
گرادیان شعاعی را نیز می توان به صورت تکراری درآورد (کادر بالا)
و در کادرهای زیرین ترکیبی از گرادیان ها را می بینید



two layer with radial gradient on bottom layer and two linear gradient with opacity on top layer



Combining repeating linear gradients (320deg & 40deg)
نکته ها
گرادیان رنگ را می توان به صورت خطی یا دایره ای رسم کرد می توان جهت آن را براساس درجه تعیین کرد
در این صفحه همه رنگ ها براساس نام رنگ استفاده شده بودند و در گرادیان شفاف از سیستم rgba استفاده شده بود. برای تعیین رنگ می توان از سیستم rgb بدون آلفا و یا از سیستم HEX استفاده کرد سیستم های دیگری هم موجود است مثل HSL و ... که مرورگرها از انها پشتیبانی می کنند و می توان استفاده کرد
این صفحه را برای استفاده خودم در طراحی صفحات سایت تهیه کرده ام و براساس زمینه ای که دارید می توانید از آن استفاده ببرید این اطلاعات به صورت تکه تکه در سایت w3 موجود است و من خواستم در یک صفحه گردآوری کنم و شد این صفحه.
چه فرقی بین background | background-color | background-image | bgcolor وجود دارد؟
سیستم رنگ HSL چیست؟
سیستم رنگ rgba چیست؟
کدهای رنگ HEX چیستند؟