تابع ()radial-gradient در CSS

radial-gradient() Function

تابع ()radial-gradient در CSS برای ایجاد شیب رنگ شعاعی بکار می رود. برای ایجاد این نوع گرادینت (شیب رنگ) همانند گرادینت عادی حداقل باید دو رنگ را مشخص کنیم.

نحوه نوشتار

background: radial-gradient(yellow, red, blue);
background: radial-gradient(yellow 33%,red 34% 67%, blue 68%);
background: radial-gradient(ellipse at right, yellow, red, blue);
background: radial-gradient(circle farthest-side at right, yellow 33%, red 34% 67%, blue 68%);

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

رادیال گرادینت با یک نقطه مرکزی، نقطه پایانی و دو یا تعداد بیشتری color-stops (نقاطی که رنگها عوض می شوند)، تعریف می شود.

مقادیر

موقعیت​

موقعیت گرادینت همانند ویژگی background-position مشخص می شود. مقدار پیشفرض آن center است.

شکل​

شکل گرادینت را مشخص می کند. شامل دو مقدار میشود:
۱. circle (مشخص می کند گرادینت دایره ای باشد)
۲. ellipse (مشخص می کند گرادینت بیضی شکل باشد)

اندازه​

• closest-side
• closest-corner
• farthest-side
• farther-corner

در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:

html

<div class="wrapper">
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

css

.wrapper {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
}
.wrapper div {
     width: 200px;
     height: 200px;
     min-width: 210px;
     margin-top: 15px;
}
.box {
    background: radial-gradient(
         circle farthest-side at right,
         yellow 33%,
         red 34% 65%,
         rgba(0, 0, 255, 0) 66%
     ),
     radial-gradient(
         circle farthest-side at left,
         red 19%,
         blue 20% 45%,
         yellow 46%
      );
}
.box2 {
    background: radial-gradient(
        red,
        rgba(255, 0, 0, 0.555) 31%,
        transparent 68%
     );
     border-radius: 100%;
}
.box3 {
    background: radial-gradient(ellipse at top, yellow, red, blue); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.