Hướng dẫn tạo CSS Gradient Generator bằng HTML, CSS và JavaScript

CSS gradient là gì?

CSS gradient là kiểu nền được tạo từ một dải màu chuyển tiếp giữa hai hoặc nhiều màu khác nhau. Thay vì sử dụng hình nền dạng ảnh, gradient được tạo trực tiếp bằng CSS thông qua các hàm như linear-gradient() hoặc radial-gradient().

Nhờ vậy, nền có thể co giãn linh hoạt theo kích thước phần tử mà vẫn giữ được chất lượng hiển thị.

Ví dụ một gradient đơn giản từ màu xanh sang màu tím:

background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);

Trong đó:

• 90deg là góc của gradient (90 độ).
• #3b82f6 là màu bắt đầu.
• #8b5cf6 là màu kết thúc.

Lợi ích của CSS Gradient Generator

Khi số lượng màu và tham số tăng lên, việc viết tay gradient có thể trở nên khó nhớ và dễ nhầm lẫn. CSS Gradient Generator giải quyết vấn đề này bằng cách cung cấp giao diện trực quan:

• Chọn màu bằng trình chọn màu thay vì gõ mã màu thủ công.
• Điều chỉnh góc hoặc hướng gradient bằng thanh trượt.
• Xem trước kết quả ngay lập tức.
• Tự động sinh ra đoạn mã CSS để sao chép và sử dụng.

Cấu trúc HTML cơ bản của CSS Gradient Generator

Để xây dựng một trình tạo gradient đơn giản, cần các thành phần chính sau trong HTML:

• Hai trường chọn màu cho điểm bắt đầu và kết thúc.
• Một điều khiển điều chỉnh góc hoặc hướng.
• Một khu vực xem trước gradient.
• Một khối hiển thị đoạn mã CSS tương ứng.

Ví dụ cấu trúc HTML tối giản:

<div class="gradient-generator">
    <label>Màu 1:</label>
    <input type="color" id="color-1" value="#3b82f6">

    <label>Màu 2:</label>
    <input type="color" id="color-2" value="#8b5cf6">

    <label>Góc (độ):</label>
    <input type="range" id="angle" min="0" max="360" value="90">

    <div id="gradient-preview"></div>

    <pre><code id="gradient-code"></code></pre>
</div>

Các phần tử input dùng để người dùng thao tác, phần tử div dùng làm khu vực xem trước, còn thẻ pre chứa đoạn mã CSS được tạo ra từ JavaScript.

Thêm CSS để hiển thị gradient rõ ràng

Phần CSS dưới đây giúp khu vực xem trước gradient dễ nhìn hơn và bố cục gọn gàng hơn. Đây là một ví dụ đơn giản có thể áp dụng trong nhiều ngữ cảnh khác nhau.

.gradient-generator {
    max-width: 480px;
    margin: 16px 0;
}

.gradient-generator label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.gradient-generator input[type="color"],
.gradient-generator input[type="range"] {
    margin-top: 4px;
}

#gradient-preview {
    margin-top: 16px;
    height: 160px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

#gradient-code {
    margin-top: 12px;
    font-size: 13px;
}

Khu vực xem trước được đặt chiều cao cố định để gradient hiển thị rõ ràng, đồng thời thêm đường viền và bo góc để nội dung trực quan hơn.

Viết JavaScript để tạo gradient động

JavaScript sẽ lắng nghe các sự kiện thay đổi trên các trường nhập liệu và cập nhật lại nền gradient cũng như đoạn mã CSS. Mỗi khi người dùng thay đổi màu hoặc góc, hàm cập nhật sẽ được gọi.

(function() {
    var color1Input = document.getElementById("color-1");
    var color2Input = document.getElementById("color-2");
    var angleInput = document.getElementById("angle");
    var preview = document.getElementById("gradient-preview");
    var codeOutput = document.getElementById("gradient-code");

    function updateGradient() {
        var c1 = color1Input.value;
        var c2 = color2Input.value;
        var angle = angleInput.value;

        var css = "linear-gradient(" + angle + "deg, " + c1 + ", " + c2 + ")";
        preview.style.backgroundImage = css;
        codeOutput.textContent = "background-image: " + css + ";";
    }

    color1Input.addEventListener("input", updateGradient);
    color2Input.addEventListener("input", updateGradient);
    angleInput.addEventListener("input", updateGradient);

    updateGradient();
})();

Đoạn mã trên đảm bảo rằng gradient luôn được cập nhật tương ứng với lựa chọn hiện tại của người dùng và đồng thời hiển thị đoạn mã CSS có thể sử dụng ngay.

Demo CSS Gradient Generator

Ví dụ dưới đây là một demo hoạt động trực tiếp của CSS Gradient Generator. Người đọc có thể thay đổi hai màu và góc gradient, sau đó sao chép đoạn mã CSS đã được tạo sẵn.

Mở rộng tính năng cho CSS Gradient Generator

Từ phiên bản cơ bản, có thể mở rộng trình tạo gradient theo nhiều hướng khác nhau:

• Thêm nhiều điểm màu hơn để tạo gradient phức tạp.
• Hỗ trợ chọn loại gradient khác như radial-gradient hoặc conic-gradient.
• Thêm trường nhập để điều chỉnh vị trí từng màu.
• Bổ sung nút sao chép đoạn mã CSS vào clipboard để sử dụng nhanh chóng.

Kết luận

CSS Gradient Generator là một công cụ trực quan giúp tạo nền chuyển màu nhanh chóng, chính xác và linh hoạt.

Bằng cách kết hợp HTML để xây dựng giao diện, CSS để định dạng và JavaScript để xử lý logic, người dùng có thể tương tác trực tiếp, điều chỉnh màu sắc, góc độ và nhận ngay đoạn mã CSS tương ứng.

Việc áp dụng gradient đúng cách giúp giao diện web trở nên hiện đại, nổi bật và chuyên nghiệp hơn.