Hiêu ứng Chuyển màu với Gradient và cách tạo ra Linear Gradient với CSS

Linear Gradient

CSS3 gradient cho phép bạn hiện thị biến đổi liên tục giữa hai hoặc nhiều màu. CSS3 có hai kiểu chuyển đổi màu Linear và Radial

Tạo ra linear gradient bạn phải định nghĩa tối thiểu điểm dừng màu. Điểm dừng màu là màu nằm giữa khoảng màu cần biến đổi liên tục. Bạn cũng cần thiết lập một điểm bắt đầu và hướng hoặc góc qua đó màu biến đổi.

Ví dụ sau, màu xanh và trắng tạo ra gradient biến đổi từ trên xuống dưới.

<style>
.exam1 {
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient(DeepSkyBlue, Black);
}
</style>

Có thể thêm nhiều điểm màu, mỗi màu cách nhau bởi dấu phảy ,

Ví dụ: background: linear-gradient(blue, yellow, green, pink, white);

Có thể thêm nhiều điểm màu, mỗi màu cách nhau bởi dấu phảy ,

Ví dụ: background: linear-gradient(blue, yellow, green, pink, white);

Các điểm dừng màu có thể chỉ ra không đều cho từng màu khoảng cách tính từ gốc của hướng (theo phần trăm, px, em)

Ví dụ: background:linear-gradient(blue 20%, yellow 30%, green 85%);

Hướng Linear gradient

Để chỉ ra hướng bạn cần chỉ ra điểm bắt đầu của gradient với các giá trị: left right top bottom

Ví dụ tô từ trái qua phải background: linear-gradient(left, blue, green, white);

Chrome: background: linear-gradient(left, blue, green, white);

Ví dụ tô từ dưới lên background: linear-gradient(bottom, blue, green, white);

Chrome: background: linear-gradient(bottom, blue, green, white);

left, right, top, bottom dùng để xác định hướng gradient. Bạn có thể kết hợp vài hướng trong một ví dụ (bottom right biến đổi từ dưới lên đồng thời từ phải sang trái)

Góc xác định hướng gradient

Ví dụ dùng left, right, top, bottom kết hợp để tạo ra các hướng như bottom left tương đương 45 độ

Ví dụ tô từ dưới lên background: linear-gradient(bottom left, blue, green, white);

Chrome: background: linear-gradient(bottom left, blue, green, white);

Ngoài ra có thể chỉ thắng ra góc chuyển đổi ví dụ 100 độ: background:linear-gradient(100deg, blue, green, white);

repeating-linear-gradient

Tạo ra các gradient lặp lại bằng hàm: repeating-linear-gradient()

Ví dụ: background:-moz-repeating-linear-gradient(blue, green 20px);