🌅Trình Tạo Gradient CSS

Sự Khác Biệt giữa linear, radial và conic

CSS có 3 hàm gradient với cách thay đổi màu khác nhau, tất cả đều được viết trong thuộc tính background.

• linear-gradient：linear-gradient là gradient tuyến tính nơi màu thay đổi dọc theo đường thẳng theo góc được chỉ định.
• radial-gradient：radial-gradient là gradient xuyên tâm nơi màu lan tỏa từ vị trí tâm hướng ra ngoài dưới dạng hình tròn hoặc hình elip.
• conic-gradient：conic-gradient là gradient conic nơi màu thay đổi theo chiều kim đồng hồ xung quanh vị trí tâm.

Tương Ứng Giữa Góc và Từ Khóa Hướng

Góc của linear-gradient là 0deg hướng từ dưới lên trên, và khi giá trị tăng lên, nó quay theo chiều kim đồng hồ. Góc cũng có thể được viết bằng từ khóa hướng như 'to right', trong đó 90deg giống 'to right' và 180deg giống 'to bottom'.

Cách Viết Điểm Dừng Màu và Độ Trong Suốt

Điểm dừng màu là vị trí trong gradient nơi màu đó xuất hiện, trong đó 0% là điểm bắt đầu và 100% là điểm kết thúc. Ví dụ: '#3B82F6 0%, #8B5CF6 100%' chỉ định màu thay đổi từ xanh lam ở điểm bắt đầu sang tím ở điểm kết thúc.

• Định Dạng #RRGGBB：Định dạng #RRGGBB là cách viết màu bằng cách biểu diễn cường độ của đỏ, xanh lục và xanh lam bằng số thập lục phân 2 chữ số, trong đó #FF0000 biểu diễn màu đỏ không trong suốt.
• Định Dạng rgba：Định dạng rgba là cách viết màu bằng cách thêm độ trong suốt (0–1) vào giá trị đỏ, xanh lục, xanh lam (0–255), trong đó độ trong suốt 0,5 biểu diễn màu bán trong suốt.