Source Code

Membuat Generator Gradien Warna Acak HTML, CSS & Javascript

Mandan Koding1 Oktober 20220

Selamat datang di mandankoding.com, pada tutorial berbagi kode kali ini, kita akan berbagi kode tentang Cara Membuat Generator Gradien Acak HTML, CSS & Javascript. Dan sebelumnya kami juga sudah berbagi Source Code tentang Cara Membuat Form Login Dengan HTML Dan CSS.

Membuat Generator Gradien Warna Acak HTML, CSS & Javascript

Gradien warna adalah perubahan warna yang terjadi ketika dua warna atau lebih di gabungkan. Gradient ini sering di gunakan dalam desain-desain modern, karena gradasi warna yang di hasilkan ini menghasilkan transisi warna yang sangat lembut dan halus. Oleh karena itu, banyak desainer yang selalu menggunakan gradasi warna dalam setiap desainnya.

Kita langsung saja, silahkan buat file index.html, style.css dan app.js. Seperti di bawah ini:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mandan Koding</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <h2>Gradient Generator</h2>
        <div id="output-color"></div>
        <input type="text" id="output-code">
        <div class="btn-container">
            <button id="generate-btn">Generate</button>
            <button id="copy-btn">Copy</button>
        </div>
    </div>

    <script src="app.js"></script>

</body>

</html>

style.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    background: linear-gradient(332deg, #0cb645, #111352)
}

.container {
    width: 410px;
    background-color: #ffffff;
    padding: 30px 30px;
    border-radius: 8px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    box-shadow: 0 20px 25px rgba(60, 60, 100, 0.15);
}

.container h2 {
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: 1px;
    font-size: 30px;
    color: #0558b7;
}

#output-color {
    width: 100%;
    height: 35vmin;
    border-radius: 5px;
}

#output-code {
    background-color: #f1f5fc;
    font-size: 2.7vmin;
    font-weight: 500;
    color: #044db4;
    width: 100%;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid #cfd5d5;
    margin: 20px 0 40px 0;
}

.btn-container {
    display: flex;
    justify-content: space-around;
}

.btn-container button {
    background-color: #044db4;
    min-width: 42%;
    padding: 12px 0;
    color: #ffffff;
    border-radius: 7px;
    font-size: 3vmin;
    margin-bottom: 8px;
    font-weight: 500;
    cursor: pointer;
}

.btn-container button:nth-last-of-type(1) {
    background-color: #ae7617;
}

app.js

let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");
let hexString = "012345678abcdef";

let randomColor = () => {
    let hexCode = "#";
    for (i = 0; i < 6; i++) {
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    return hexCode;
}

let generateGrad = () => {
    let colorOne = randomColor();
    let colorTwo = randomColor();
    let angle = Math.floor(Math.random() * 360);
    outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
    outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
}

generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;

copyBtn.addEventListener("click", () => {
    outputCode.select();
    document.execCommand("copy");
})

Jika semua file di buat, silahkan jalankan file index.html di browser kami.

Itu saja dari kami, semoga bermanfaat. Jika terdapat kesalahan dalam kode dan pejelasan yang kurang pas, silahkan tinggal kan pesan di kolom komentar di bawah:

Selamat mencoba🙏🎉🎉🎉🎉