Bộ tạo dải màu CSS

Bộ tạo dải màu CSS này dựng các dải màu tuyến tính và tỏa tròn từ những điểm màu do bạn điều khiển, kèm phần xem trước trực tiếp và một khai báo nền dán được ngay. Hãy kéo các điểm màu dọc theo thanh, đặt góc hay hình dạng, và phần CSS cập nhật lập tức.

Mọi thứ chạy trong trình duyệt của bạn từ những màu và thiết lập bạn chọn, nên không có gì được tải lên và bạn có thể sao chép kết quả rồi dùng khi ngoại tuyến.

Dải màu tuyến tính pha các màu dọc theo một đường thẳng, và góc quy định hướng của nó: 0 độ hướng lên, 90 độ hướng sang phải, 180 độ hướng xuống. Dải màu tỏa tròn pha màu lan ra từ tâm, theo hình tròn hay hình bầu dục.

Cả hai đều là giá trị CSS chuẩn, viết là linear-gradient() và radial-gradient(), và cả hai dùng chung một danh sách điểm màu, nên đổi kiểu vẫn giữ nguyên màu của bạn và chỉ đổi cách chúng trải ra.

Mỗi điểm màu là một màu đặt ở vị trí từ 0% tới 100%. Dải màu pha mượt giữa các điểm màu kề nhau, nên vị trí của một điểm quyết định nơi màu đó đậm nhất và nó nhạt dần sang màu kế tiếp nhanh tới đâu.

Hãy thêm bao nhiêu điểm màu tùy nhu cầu để dựng dải màu nhiều màu, kéo chúng để tinh chỉnh cách pha, hoặc nhấp lên thanh để thả một điểm mới đúng chỗ bạn muốn. Hai điểm màu là mức tối thiểu mà một dải màu cần.

Hãy sao chép đoạn mã được tạo và dán nó làm nền cho bất kỳ phần tử nào, chẳng hạn một mục, một thẻ hay một nút. Các trình duyệt hiện đại hỗ trợ linear-gradient và radial-gradient mà không cần tiền tố riêng của hãng, nên giá trị này dùng được ngay.

Vì một dải màu chỉ là một giá trị, bạn cũng có thể dùng nó ở mọi nơi mong đợi một ảnh nền, xếp lớp nó lên một màu đặc làm phương án dự phòng, hay dùng lại cùng bộ điểm màu cho cả bản tuyến tính lẫn bản tỏa tròn để có vẻ ngoài nhất quán.