CSS Linear Gradients
Để tạo một linear gradient, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các màu. Bạn cũng có thể đặt điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng gradient.
Cú pháp:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Hướng màu - Từ trên xuống dưới (mặc định)
Ví dụ sau đây cho thấy một linear gradient bắt đầu ở trên cùng. Nó bắt đầu màu đỏ, chuyển sang màu vàng:
Từ trên xuống dưới (mặc định)
#grad { background-image: linear-gradient(to right, red , yellow); }
Hướng màu - Từ trái qua phải
Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu vàng:
Từ trái qua phải
#grad { background-image: linear-gradient(to right, red , yellow); }
Hướng màu - Chéo
Bạn có thể tạo một gradient theo đường chéo bằng cách chỉ định cả vị trí bắt đầu ngang và dọc.
Ví dụ sau đây cho thấy một linear gradient bắt đầu ở trên cùng bên trái (và đi xuống dưới cùng bên phải). Nó bắt đầu màu đỏ, chuyển sang màu vàng:
Hướng chéo
Sử dụng Angles
Nếu bạn muốn kiểm soát nhiều hơn về hướng của gradient, bạn có thể xác định một góc, thay vì các hướng được xác định trước (to bottom, to top, to right, to left, to bottom right,...). Giá trị 0deg tương đương với "to top". Giá trị 90deg tương đương với "to right". Giá trị 180deg tương đương với "to bottom".
Cú pháp:
background-image: linear-gradient(angle, color-stop1, color-stop2);
Ví dụ sau đây cho thấy cách sử dụng các góc trên linear gradient:
180deg
#grad { background-image: linear-gradient(180deg, red, yellow); }
Sử dụng Multiple Color Stops
Ví dụ sau cho thấy một linear gradient (từ trên xuống dưới) với nhiều điểm dừng màu:
#grad { background-image: linear-gradient(red, yellow, green); }
Ví dụ sau đây cho thấy cách tạo một linear gradient (từ trái sang phải) với màu của cầu vồng và văn bản:
Rainbow Background
#grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }
Sử dụng Transparency
CSS gradient cũng hỗ trợ độ trong suốt, có thể được sử dụng để tạo hiệu ứng mờ dần.
Để thêm độ trong suốt, chúng tôi sử dụng hàm rgba() để xác định các điểm dừng màu. Tham số cuối cùng trong hàm rgba() có thể là giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 chỉ ra độ trong suốt đầy đủ, 1 biểu thị toàn màu (không có độ trong suốt).
Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu hoàn toàn trong suốt, chuyển sang màu đỏ đầy đủ:
Lặp lại linear-gradient
Hàm repeating-linear-gradient() được sử dụng để lặp lại các linear-gradient:
#grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }
CSS Radial Gradients
Một radial gradient được xác định bởi tâm của nó.
Để tạo một radial gradient, bạn cũng phải xác định ít nhất hai điểm dừng màu.
Cú pháp:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
heo mặc định, hình dạng là hình elip, kích thước là góc xa nhất và vị trí là trung tâm.
Radial Gradient - Các điểm dừng màu có khoảng cách đều nhau (mặc định)
Ví dụ sau cho thấy một radial gradient với các điểm dừng màu cách đều nhau:
#grad { background-image: radial-gradient(red, yellow, green); }
Radial Gradient - Các điểm dừng màu có khoảng cách khác nhau
Ví dụ sau đây cho thấy một radial gradient với các điểm dừng màu cách nhau khác nhau:
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }
Thay đổi hình dạng
Tham số hình dạng xác định hình dạng. Nó có thể lấy giá trị vòng tròn hoặc hình elip. Giá trị mặc định là hình elip.
Ví dụ sau đây cho thấy một radial gradient có hình dạng của một vòng tròn:
#grad { background-image: radial-gradient(circle, red, yellow, green); }
Sử dụng các từ khóa size khác nhau
Tham số size xác định kích thước của gradient. Nó có thể nhận bốn giá trị:
- closest-side
- farthest-side
- closest-corner
- 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); }Lặp lại radial-gradient
Hàm repeat-radial-gradient () được sử dụng để lặp lại các radial gradient:
#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }
CSS Conic Gradients
conic gradient là một gradient với các chuyển đổi màu được quay xung quanh một điểm trung tâm.
Để tạo một conic gradient, bạn phải xác định ít nhất hai màu.
Cú pháp:
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
Theo mặc định, angle là 0deg và position là center.
Nếu không có degree nào được chỉ định, các màu sẽ được trải đều xung quanh điểm trung tâm.
Conic Gradient: Three Colors
Ví dụ sau cho thấy một conic gradient với ba màu:
#grad { background-image: conic-gradient(red, yellow, green); }
Conic Gradient với 5 màu
Ví dụ sau đây cho thấy một conic gradient với năm màu:
#grad { background-image: conic-gradient(red, yellow, green, blue, black); }
Conic Gradient: 3 màu và Degrees
Ví dụ sau đây cho thấy một conic gradient với ba màu và một mức độ cho mỗi màu:
#grad { background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg); }
Tạo biểu đồ hình tròn
Chỉ cần thêm border-radius: 50% để làm cho gradient hình nón trông giống như một biểu đồ tròn:
#grad { background-image: conic-gradient(red, yellow, green, blue, black); border-radius: 50%; }
Đây là một biểu đồ hình tròn khác với các độ được xác định cho tất cả các màu:
#grad { background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg); border-radius: 50%; }
Conic Gradient với các góc được chỉ định
Ví dụ sau đây cho thấy một conic gradient với góc từ 90deg:
#grad { background-image: conic-gradient(from 90deg, red, yellow, green); }
Conic Gradient với vị trí trung tâm
Ví dụ sau đây cho thấy một conic gradient với vị trí trung tâm là 60% 45%:
#grad { background-image: conic-gradient(at 60% 45%, red, yellow, green); }
Lặp lại conic gradient
Hàm repeating-conic-gradient() được sử dụng để lặp lại các conic gradient:
#grad { background-image: repeating-conic-gradient(red 10%, yellow 20%); border-radius: 50%; }
Đây là một conic gradient lặp lại với các màu bắt đầu và dừng màu được xác định:
#grad { background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg); border-radius: 50%; }