Tạo Gradient

Tạo CSS Gradient - Tạo Gradient Đẹp Mắt

Công cụ tạo CSS gradient mạnh mẽ tạo gradient tuyến tính và xuyên tâm với nhiều màu. Có xem trước trực tiếp, hướng và vị trí tùy chỉnh, gradient có sẵn, và xuất code CSS sẵn sàng sử dụng. Hoàn hảo cho web designers và developers tạo thiết kế web hiện đại. Xem thêm Tạo Bảng Màu và Kiểm Tra Độ Tương Phản.

Làm sao tạo gradient CSS cho phần hero?

Hãy bắt đầu với hai màu có liên hệ — tông tương tự an toàn nhất vì pha trộn mà không tạo tông giữa đục ngầu. Thả chúng vào hai điểm dừng đầu tiên và đặt góc 135deg, đọc như ánh sáng tự nhiên từ trên-trái và là hướng gradient phổ biến nhất trong thiết kế hero hiện đại. Xem trước rồi sao chép quy tắc CSS được sinh (ví dụ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);) và dán vào container hero trong stylesheet. Để chữ dễ đọc, phủ một lớp tối bán trong suốt giữa gradient và chữ bằng background-image thứ hai — linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) bên trên gradient màu. Đây là mẹo mà hầu như mọi landing page hiện đại đều dùng.

Khác biệt giữa gradient tuyến tính và tỏa tròn là gì?

Gradient tuyến tính chuyển màu dọc theo trục thẳng xác định bằng góc (0deg là dưới lên, 90deg là trái sang phải, 180deg là trên xuống, 270deg là phải sang trái). Đây là lựa chọn đúng cho nền tràn, thẻ, nút, và bất cứ nơi nào bạn muốn quét theo hướng. Gradient tỏa tròn chuyển màu từ điểm trung tâm ra ngoài theo hình tròn hoặc elip đồng tâm; bạn có thể đặt tâm bất kỳ đâu (radial-gradient(circle at top right, #A, #B)). Đây là lựa chọn đúng cho hiệu ứng đèn chiếu, quả cầu phát sáng, trạng thái hover nút và nền trừu tượng. Gradient tuyến tính áp đảo trong UI sản phẩm; gradient tỏa tròn mang tính trang trí hơn và dùng tiết kiệm.

Điểm dừng màu là gì và phần trăm hoạt động thế nào?

Điểm dừng màu là cặp (màu, vị trí) bảo trình duyệt chính xác vị trí trên trục gradient mà màu đó xuất hiện ở cường độ tối đa. Vị trí là phần trăm từ 0% (đầu trục) đến 100% (cuối). Không có vị trí, trình duyệt phân bố các điểm dừng đều: hai màu rơi vào 0% và 100%, ba màu vào 0%, 50%, 100%, v.v. Bạn có thể dịch chuyển điểm dừng bất kỳ để lệch gradient: linear-gradient(red 0%, yellow 20%, blue 100%) làm chuyển tiếp đỏ-vàng chật chội và dành phần lớn khung cho hòa trộn vàng-xanh. Đặt hai điểm dừng cùng vị trí tạo điểm dừng cứng (không pha trộn, đổi màu tức thì), cách này tạo sọc, thanh tiến trình phân đoạn và nền màu khối.

Làm sao chọn góc gradient đúng?

Quy ước góc CSS theo kiểu đồng hồ: 0deg chỉ lên, 90deg chỉ phải, 180deg chỉ xuống, 270deg chỉ trái. 90deg (trái sang phải) hợp với thanh điều hướng và header dòng thời gian; 180deg (trên xuống) là gradient kiểu bầu trời mặc định; 135deg (trên-trái xuống dưới-phải) là chiến mã thị giác — đọc như ánh nắng tự nhiên và là góc hầu hết ứng dụng hiện đại dùng cho hero, dashboard và nền thẻ. Đảo ngược gradient bằng cách cộng 180 vào góc, hoặc dùng nút Đảo Ngược hoán đổi vị trí điểm dừng. Tránh các góc như 1deg hay 89deg trừ khi bạn muốn hiệu ứng gần-nhưng-không-phải ngang; nghiêng nhẹ thường trông như bug CSS chứ không phải thiết kế chủ ý.

Có thể tạo gradient với nhiều hơn hai màu mà vẫn mượt không?

Có, và thêm màu thứ ba là cách dễ nhất để gradient trông cao cấp thay vì tầm thường. Mẹo là chọn ba màu đã ở gần nhau trên vòng tròn màu — tương tự (đỏ, cam, vàng) hoặc một cặp thương hiệu cộng một trung tính liên quan. Đặt chúng tại 0%, 50%, 100% cho hòa trộn ba chiều đều, hoặc đẩy điểm dừng giữa lệch trung tâm (0%, 30%, 100%) để bất đối xứng. Tránh nhảy qua vòng vì trình duyệt nội suy qua các tông không liên quan và tạo điểm giữa xám đục — gradient xanh dương-vàng đi qua xám-xanh lá ở 50%. Cho hiệu ứng cầu vồng cần sáu bảy điểm dừng, nhưng thường đọc là trang trí chứ không chuyên nghiệp. Hai hoặc ba điểm dừng là điểm ngọt cho hầu hết công việc UI.

Làm sao giữ chữ dễ đọc trên nền gradient?

Gradient thay đổi tương phản dọc theo chiều dài, nên màu tiền cảnh đạt WCAG 4.5:1 ở trên có thể thất bại ở dưới. Bốn phòng thủ: (1) phủ một lớp phẳng tối hoặc sáng bán trong suốt giữa gradient và chữ bằng background-image thứ hai — linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) giữ tương phản đều; (2) giới hạn chữ trong khung phẳng có nền riêng (một thẻ trên hero); (3) thêm bóng chữ tinh tế (text-shadow: 0 1px 3px rgba(0,0,0,0.4)) để nâng chữ khỏi vùng bận; (4) hạn chế độ bão hòa gradient để điểm dừng tối nhất vẫn đủ tối tương phản với trắng ở vị trí xấu nhất. Luôn xác nhận tương phản ở vị trí xấu nhất bằng công cụ kiểm tra WCAG trước khi phát hành.

Chi phí hiệu năng của gradient CSS so với nền ảnh là bao nhiêu?

Gradient CSS gần như miễn phí so với nền ảnh. Trình duyệt tính chúng lúc paint bằng shader GPU đơn giản, bản thân quy tắc chỉ vài chục byte văn bản thay vì hàng chục hoặc trăm kilobyte pixel nén, và chúng co giãn ra mọi kích thước container mà không tạo cạnh nhòe như JPG. Chúng cũng thích nghi tức thì với chế độ tối hoặc ghi đè theme bằng biến CSS. Chi phí nhỏ duy nhất là khi animation: animate background-image không được tăng tốc GPU, nên chuyển tiếp cross-fade giữa hai gradient có thể giật. Cách giải quyết là xếp lớp hai nền gradient và animate opacity của cái trên, được tăng tốc GPU đầy đủ. Cho hero tĩnh, gradient gần như luôn ưu việt hơn nền raster.

Làm sao khớp gradient với màu tôi thấy trên website ngưỡng mộ?

Chụp màn hình cảm hứng, mở trong bộ chọn màu bất kỳ (công cụ Chọn Màu Từ Hình Ảnh trên site này, Figma hoặc cây nhỏ giọt của hệ điều hành) và lấy mẫu điểm sáng nhất và bóng tối nhất trong gradient. Thả hai giá trị HEX đó vào điểm dừng đầu tiên và cuối cùng ở đây. Nếu gradient gốc có ba màu, lấy mẫu cả phần giữa và thêm điểm dừng ở khoảng phần trăm tương tự. Hầu hết gradient chuyên nghiệp dùng điểm dừng đơn sắc (một tông, hai độ sáng) hoặc tương tự (tông kề nhau với nội suy mượt); nếu mẫu của bạn cho thấy màu giữa rất khác, có lẽ đó là pha trộn cộng với lớp phủ trong suốt chứ không phải gradient đơn. Hãy thử đổi góc thành 135deg nếu cảm hứng quét theo đường chéo.

Nội suy OKLCH là gì và tại sao trông đẹp hơn sRGB?

Khi trình duyệt vẽ gradient, nó phải tạo ra mọi màu trung gian giữa các điểm dừng của bạn, và không gian màu mà nó nội suy thay đổi kết quả đáng kể. Mặc định kế thừa là sRGB, pha trộn giá trị đỏ/lục/lam thô; vì sRGB không đồng đều theo cảm nhận, các tông đối lập trôi qua một màu xám xỉn, bạc màu ở điểm giữa — chính là vấn đề khét tiếng "tại sao gradient xanh dương-vàng của tôi đục ngầu ở giữa". OKLCH (và người anh em Descartes là Oklab) nội suy trong không gian đồng đều theo cảm nhận, được thiết kế để các bước số bằng nhau trông như các bước thị giác bằng nhau, giữ độ sáng đều và định tuyến tông màu theo con đường ngắn, rực rỡ thay vì đi qua xám. Công cụ này cho bạn chọn không gian nội suy và xem trước kết quả chính xác. Khi bạn chọn OKLCH, code CSS được sao chép sẽ cung cấp trước bản dự phòng cảm nhận đã được dựng sẵn rồi nâng cấp dần lên cú pháp CSS Color 4 gốc `in oklch` trong khối @supports, để các trình duyệt không hiểu gợi ý vẫn render cùng gradient mượt mà mà bạn đã duyệt thay vì âm thầm rơi về một bản pha trộn sRGB khác. Dùng OKLCH hoặc Oklab cho các pha trộn nhiều tông rực rỡ; chỉ dùng sRGB khi bạn phải khớp một thiết kế kế thừa có sẵn.

Kiểm tra tương phản WCAG hoạt động thế nào và đạt là gì?

Gradient thay đổi độ sáng dọc theo chiều dài, nên chữ trắng đọc rõ trên đầu sáng của hero có thể trở nên không đọc được trên đầu tối (hoặc ngược lại). Kiểm tra tương phản lấy mẫu gradient dày đặc từ 0% đến 100% trong không gian nội suy bạn chọn, tính tỷ lệ tương phản theo độ chói tương đối WCAG giữa màu chữ và mỗi điểm lấy mẫu, rồi báo cáo tỷ lệ trường hợp xấu nhất duy nhất cùng vị trí xảy ra. Một nền đạt phải vượt ngưỡng ở mọi nơi, không chỉ một đầu: WCAG AA cần 4.5:1 cho chữ thân thường, AA Lớn cho phép 3:1 với chữ 18pt+/14pt đậm, và AAA muốn 7:1. Chuyển đổi giữa chữ trắng và đen (hoặc chọn màu tùy ý) để xem cái nào an toàn. Nếu tỷ lệ trường hợp xấu nhất không đạt, hãy sửa bằng cách làm tối hoặc sáng đầu có vấn đề, giảm độ bão hòa, thêm lớp phủ bán trong suốt giữa gradient và chữ, hoặc đặt chữ trên thẻ đặc riêng — rồi kiểm tra lại đến khi vị trí xấu nhất đạt.

Tính năng chính

• Tạo gradient tuyến tính và xuyên tâm
• Xem trước trực tiếp với cập nhật tức thì
• Thêm color stops không giới hạn
• Điều chỉnh vị trí màu chính xác
• Nhiều tùy chọn hướng
• Hỗ trợ góc tùy chỉnh (0-360°)
• 8 gradient có sẵn đẹp mắt
• Sao chép code CSS vào clipboard
• Tạo gradient ngẫu nhiên
• Đảo ngược hướng gradient
• Xóa color stops (tối thiểu 2)
• Xuất CSS sẵn sàng sử dụng
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Giao diện thân thiện với mobile