Hello Reader Here you’ll Find Code Gradient Generator Source Code . Earlier I have shared many blogs on Gradient Generator. and now I’m going to create a Gradient Generator Source Code .



Gradient Generator Source Code


HTML CODE  : 


<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Gradient Generator Source Code </title>

        <!--Font Awesome-->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

        <!--Google Fonts-->

        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">

        <!--Stylesheet-->

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="container">

            <div class="colors">

                <input type="color" id="color-a" value="#1488cc">

                <input type="color" id="color-b" value="#2b32b2">

            </div>

            <div class="buttons">

                <button onclick="setDirection('to top',this)">

                <i class="fas fa-arrow-up"></i>

                </button>

                <button class="active" onclick="setDirection('to bottom',this)">

                <i class="fas fa-arrow-down"></i>

                </button>

                <button onclick="setDirection('to right',this)">

                <i class="fas fa-arrow-right"></i>

                </button>

                <button onclick="setDirection('to left',this)">

                <i class="fas fa-arrow-left"></i>

                </button>

                <button class="rotate-icon" onclick="setDirection('to top right',this)">

                <i class="fas fa-arrow-up"></i>

                </button>

                <button class="rotate-icon" onclick="setDirection('to bottom left',this)">

                <i class="fas fa-arrow-down"></i>

                </button>

                <button class="rotate-icon" onclick="setDirection('to bottom right',this)">

                <i class="fas fa-arrow-right"></i>

                </button>

                <button class="rotate-icon" onclick="setDirection('to top left',this)">

                <i class="fas fa-arrow-left"></i>

                </button>

            </div>

            <button id="submit" onclick="generateCode()">Generate</button>

            <div class="output">

                <textarea id="code" rows="2"></textarea>

                <button id="copy" onclick="copyText()">Copy</button>

            </div>

        </div>

        <!--Script-->

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

    </body>

</html>


CSS CODE : 


*,

*:before,

*:after{

padding: 0;

margin: 0;

box-sizing: border-box;

border: none;

outline: none;

}

body{

height: 100vh;

}

.container{

background-color: #ffffff;

width: 600px;

padding: 50px 30px;

position: absolute;

transform: translate(-50%,-50%);

top: 50%;

left: 50%;

border-radius: 10px;

box-shadow: 0 20px 25px rgba(0,0,0,0.25);

}

.container *:not(i){

font-family: "Rubik",sans-serif;

}

.colors{

width: 100%;

display: flex;

justify-content: space-around;

}

input[type="color"]{

-webkit-appearance: none;

background-color: transparent;

width: 100px;

height: 45px;

cursor: pointer;

}

input[type="color"]::-webkit-color-swatch{

border-radius: 20px;

border: none;

}

.buttons{

width: 100%;

display: flex;

justify-content: space-between;

margin: 30px 0;

}

.buttons button{

height: 35px;

width: 35px;

background-color: transparent;

border: 2px solid #d5d5dc;

color: #d5d5dc;

border-radius: 5px;

cursor: pointer;

}

.rotate-icon i{

transform: rotate(45deg);

}

.buttons .active{

border: none;

background-color: #4a6ee0;

color: #ffffff;

}

#submit{

display: block;

background-color: #4a6ee0;

color: #ffffff;

font-size: 16px;

padding: 12px 70px;

border-radius: 25px;

margin: 0 auto 30px auto;

cursor: pointer;

}

.output{

background-color: #f0f2fc;

}

#code{

width: 100%;

resize: none;

color: #30304a;

padding: 10px 20px;

background-color: transparent;

}

#copy{

font-size: 14px;

background-color: #4a6ee0;

color: #ffffff;

position: relative;

left: 85%;

bottom: 10px;

border-radius: 3px;

padding: 5px;

cursor: pointer;

}



JAVASCRIPT CODE : 


let colorOne = document.getElementById('color-a');

let colorTwo = document.getElementById('color-b');

let currentDirection = 'to bottom';

let outputCode = document.getElementById('code');

function setDirection(value,_this){

let directions = document.querySelectorAll(".buttons button");

for(let i of directions){

i.classList.remove('active');

}

_this.classList.add('active');

currentDirection = value;

}

function generateCode(){

outputCode.value = `background-image: linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value});`

document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`;

}

function copyText(){

outputCode.select();

document.execCommand('copy');

alert('Gradient Copied!');

}

generateCode();