47. Gradient trong CSS

Gradient trong CSS: bạn có thể tạo các hiệu ứng gradient bằng cách sử dụng thuộc tính background-image và hàm linear-gradient() hoặc radial-gradient(). Dưới đây là một số ví dụ về cách sử dụng các loại gradient khác nhau:

1. Linear Gradient:

css

.linear-gradient-box {
  background-image: linear-gradient(to bottom, #ff9900, #ffcc00);
}

Trong ví dụ trên, chúng ta tạo một gradient từ màu cam đến màu vàng nhạt từ trên xuống dưới.

2. Radial Gradient:

css

.radial-gradient-box {
  background-image: radial-gradient(circle, #ff3300, #990000);
}

Trong ví dụ này, chúng ta tạo một gradient hình tròn từ màu đỏ đậm đến màu đỏ nhạt.

3. Gradient Kết hợp với Hình ảnh:

css

.gradient-with-image {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("background-image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Trong ví dụ trên, chúng ta tạo một gradient từ trong suốt đến đục tạo hiệu ứng tối mờ ở phần bên phải của hình ảnh nền.

4. Gradient Đa dạng Hướng:

css

.multicolor-gradient {
  background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}

Trong ví dụ này, chúng ta tạo một gradient đa dạng màu sắc theo hướng 45 độ từ đỏ đến tím.

5. Gradient Pha trộn Màu:

css

.color-mix-gradient {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, magenta, red);
}

Trong ví dụ này, chúng ta tạo một gradient từ màu đỏ đến tím thông qua các màu cơ bản khác.

Lưu ý rằng các ví dụ trên chỉ là một phần nhỏ của khả năng tạo gradient trong CSS. Bạn có thể tùy chỉnh hướng, màu sắc và hiệu ứng gradient theo ý muốn để tạo ra thiết kế độc đáo cho trang web của mình.