آموزش گرادینت(gradient) شعاعی در CSS

یک گرادینت شعاعی، توسط مرکز(center) آن مشخص می شود. برای ایجاد یک گرادینت شعاعی باید حداقل دو ایستگاه رنگ(color stops) را مشخص کنید.

شیوه ی نوشتاری یا سینتکس

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

به طور پیش فرض، شکل(shape) بیضی است و سایز(size)  farthest-corner (دورترین گوشه) است و موقعیت(position) مرکز است.

گرادینت شعاعی که ایستگاه های رنگ به طور مساوی در آن قرار گرفته اند(این پیش فرض است)

مثال زیر، یک گرادینت شعاعی را نشان می دهد که ایستگاه های رنگ در آن به طور مساوی قرار گرفته اند:

#grad {
  background-image: radial-gradient(red, yellow, green);
}

گرادینت شعاعی - با ایستگاه های رنگ با فاصله ی مختلف

مثال زیر، یک گرادینت شعاعی را نشان می دهد که فاصله ی ایستگاه های رنگی آن مختلف است:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

پارامتر shape، شکل گرادینت شعاعی را مشخص می کند. که می تواند برابر با circle(دایره) یا ellipse(بیضی) باشد. مقدار پیش فرض، ellipse است. مثال زیر، یک گرادینت شعاعی با شکل circle را نشان می دهد:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

استفاده از کلمات کلیدی مختلف برای سایز گرادینت شعاعی

پارامتر size در گرادینت شعاعی، سایز آن را تعریف می کند. که می تواند یکی از چهار مقدار زیر باشد:
1.closest-side 

2. closest-side

3. closest-corner

4. farthest-corner

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

تکرار یک گرادینت شعاعی

از تابع repeating-radial-gradient() برای تکرار کردن گرادینت های شعاعی استفاده می شود:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}