Tạo màu Gradient trong CSS - CSS Gradients

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    14 thg 11, 2022

  • Số lượt xem

    275 lượt xem


CSS gradients cho phép bạn hiển thị các chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.

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(directioncolor-stop1color-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(anglecolor-stop1color-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%;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.