radial-gradient()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Hàm radial-gradient() trong CSS tạo ra một hình ảnh bao gồm sự chuyển đổi dần dần giữa hai hoặc nhiều màu sắc tỏa ra từ một điểm gốc. Hình dạng của nó có thể là một hình tròn hoặc hình ellipse. Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, đây là một loại <image> đặc biệt.

Try it

background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: radial-gradient(
  circle at 100%,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 75%
);

background:
  radial-gradient(ellipse at top, #e66465, transparent),
  radial-gradient(ellipse at bottom, #4d9f0c, transparent);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Cú pháp

css

/* Gradient với một màu đỏ duy nhất */
radial-gradient(red)

/* Gradient ở trung tâm của vùng chứa,
   bắt đầu bằng màu đỏ, chuyển sang màu xanh lam, và kết thúc bằng màu xanh lá */
radial-gradient(circle at center, red 0, blue, green 100%)

/* Không gian màu hsl với nội suy màu sắc dài hơn */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)

Radial gradient được chỉ định bằng cách chỉ ra tâm của gradient (nơi ellipse 0% sẽ nằm) và kích thước và hình dạng của hình dạng kết thúc (ellipse 100%).

Giá trị

<position>

Vị trí của gradient, được giải thích theo cách giống như background-position hoặc transform-origin. Nếu không được chỉ định, mặc định là center.

<ending-shape>

Hình dạng kết thúc của gradient. Giá trị có thể là circle (có nghĩa là hình dạng gradient là hình tròn với bán kính không đổi) hoặc ellipse (có nghĩa là hình dạng là hình ellipse căn chỉnh theo trục). Nếu không được chỉ định, mặc định là ellipse.

<size>

Xác định kích thước của hình dạng kết thúc của gradient. Nếu bỏ qua, mặc định là farthest-corner. Nó có thể được cho rõ ràng hoặc bằng từ khóa. Để phục vụ cho các định nghĩa từ khóa, hãy xem các cạnh hộp gradient kéo dài vô hạn theo cả hai hướng, thay vì là các đoạn đường hữu hạn.

Cả gradient hình tròn và hình ellipse đều chấp nhận các từ khóa sau cho <size>:

Từ khóa	Mô tả
`closest-side`	Hình dạng kết thúc của gradient gặp cạnh hộp gần nhất với tâm của nó (đối với hình tròn) hoặc gặp cả cạnh dọc và ngang gần nhất với tâm (đối với hình ellipse).
`closest-corner`	Hình dạng kết thúc của gradient được định kích thước sao cho nó khớp chính xác với góc gần nhất của hộp từ tâm của nó.
`farthest-side`	Tương tự như `closest-side`, ngoại trừ hình dạng kết thúc được định kích thước để gặp cạnh hộp xa nhất với tâm của nó (hoặc cạnh dọc và ngang).
`farthest-corner`	Giá trị mặc định, hình dạng kết thúc của gradient được định kích thước sao cho nó khớp chính xác với góc xa nhất của hộp từ tâm của nó.

Nếu <ending-shape> được chỉ định là circle, kích thước có thể được cho rõ ràng là <length>, cung cấp bán kính hình tròn rõ ràng. Giá trị âm không hợp lệ.

Nếu <ending-shape> được chỉ định là ellipse, kích thước có thể được cho là <length-percentage> với hai giá trị để cung cấp kích thước ellipse rõ ràng. Giá trị đầu tiên đại diện cho bán kính ngang và giá trị thứ hai là bán kính dọc. Giá trị phần trăm tương đối so với chiều tương ứng của hộp gradient. Giá trị âm không hợp lệ.

Khi từ khóa <ending-shape> bị bỏ qua, hình dạng gradient được xác định bởi kích thước đã cho. Một giá trị <length> tạo ra hình tròn, trong khi hai giá trị trong đơn vị <length-percentage> tạo ra hình ellipse. Một giá trị <percentage> đơn lẻ không hợp lệ.

<linear-color-stop>

Giá trị <color> của điểm dừng màu, theo sau là một hoặc hai vị trí dừng tùy chọn (một <percentage> hoặc <length> dọc theo trục gradient). Phần trăm 0%, hoặc độ dài 0, đại diện cho tâm của gradient; giá trị 100% đại diện cho giao điểm của hình dạng kết thúc với tia gradient ảo. Các giá trị phần trăm ở giữa được đặt tuyến tính trên tia gradient. Bao gồm hai vị trí dừng tương đương với việc khai báo hai điểm dừng màu với cùng màu tại hai vị trí.

<color-hint>

Gợi ý màu là gợi ý nội suy xác định cách gradient tiến triển giữa các điểm dừng màu liền kề. Độ dài xác định điểm nào giữa hai điểm dừng màu mà màu gradient sẽ đạt đến điểm giữa của quá trình chuyển đổi màu. Nếu bỏ qua, điểm giữa của quá trình chuyển đổi màu là điểm giữa giữa hai điểm dừng màu.

Mô tả

Như với bất kỳ gradient nào, radial gradient không có kích thước nội tại; tức là, nó không có kích thước tự nhiên hoặc ưu tiên, cũng không có tỷ lệ ưu tiên. Kích thước thực tế của nó sẽ khớp với kích thước của phần tử mà nó áp dụng.

Để tạo radial gradient lặp lại để lấp đầy vùng chứa, hãy dùng hàm repeating-radial-gradient() thay thế.

Vì <gradient> thuộc kiểu dữ liệu <image>, chúng chỉ có thể được dùng ở những nơi <image> có thể được dùng. Vì lý do này, radial-gradient() sẽ không hoạt động trên background-color và các thuộc tính khác dùng kiểu dữ liệu <color>.

Thành phần của radial gradient

Đồ thị giải thích radial gradient: tia bức xạ ảo là nằm ngang bắt đầu từ điểm giữa. Gradient hình ellipse, và do đó hình dạng kết thúc, có cùng tỷ lệ khung hình với hộp mà nó được khai báo.

Radial gradient được xác định bởi điểm trung tâm, hình dạng kết thúc, và hai hoặc nhiều điểm dừng màu.

Để tạo gradient mượt mà, hàm radial-gradient() vẽ một loạt các hình dạng đồng tâm tỏa ra từ tâm đến hình dạng kết thúc (và có thể xa hơn). Hình dạng kết thúc có thể là hình tròn hoặc hình ellipse.

Các điểm dừng màu được đặt trên một tia gradient ảo kéo dài ngang từ tâm về phía phải. Các vị trí điểm dừng màu dựa trên phần trăm tương đối so với giao điểm giữa hình dạng kết thúc và tia gradient này, đại diện cho 100%. Mỗi hình dạng là một màu duy nhất được xác định bởi màu trên tia gradient mà nó giao nhau.

Cú pháp chính thức

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<linear-color-stop> = 
  <color> <color-stop-length>?  

<linear-color-hint> = 
  <length-percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}

Ví dụ

Gradient cơ bản

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

Gradient không ở trung tâm

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #ff3355 0%,
    #4433ee 100%
  );
}

Nội suy với màu sắc

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

Trong ví dụ nội suy này, hệ màu hsl đang được sử dụng và màu sắc đang được nội suy.

css

.shorter {
  background-image: radial-gradient(
    circle at center in hsl shorter hue,
    red,
    blue
  );
}

.longer {
  background-image: radial-gradient(
    circle at center in hsl longer hue,
    red,
    blue
  );
}

Hộp bên trái sử dụng nội suy ngắn hơn, có nghĩa là màu đi thẳng từ đỏ đến xanh lam bằng cung ngắn hơn trên bánh xe màu. Hộp bên phải sử dụng nội suy dài hơn, có nghĩa là màu đi từ đỏ đến xanh lam bằng cung dài hơn, đi qua các màu xanh lá, vàng, và cam.

Thêm ví dụ về radial-gradient

Vui lòng xem Sử dụng CSS gradients để biết thêm ví dụ.

Thông số kỹ thuật

Specification
CSS Images Module Level 3 # radial-gradients

Khả năng tương thích trình duyệt

Xem thêm

Sử dụng CSS gradients
Các hàm gradient khác: repeating-radial-gradient(), linear-gradient(), repeating-linear-gradient(), conic-gradient(), repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content