JavaScript Kullanarak Gradient Generator Aracı Oluşturma

 

Web sitenizde JavaScript kodunu kullanarak çok kolay Renk Oluşturma aracı oluşturabilirsiniz.

Bunu için yapmanız gerek tek şey aşağıda vermiş olduğumuz kodları Sabit sayfanıza ekleyerek Renk oluşturma aracınızı kullanabilirsiniz.

 <style>
  
.wrapper {
  
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}
.wrapper .gradient-box {
  height: 220px;
  width: 100%;
  border-radius: 7px;
  background: linear-gradient(to left top, #5665E9, #A271F8);
}
.wrapper .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}
.options p {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.12rem;
  background: none;
}
.options .palette {
  margin-left: 60px;
}
.palette input {
  height: 41px;
  width: calc(100% / 2 - 20px);
}
.palette input:last-child {
  margin-left: 6px;
}
.wrapper textarea {
  width: 100%;
  color: #333;
  font-size: 1.05rem;
  resize: none;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.buttons button {
  padding: 15px 0;
  border: none;
  outline: none;
  color: #fff;
  margin: 0 0 -15px;
  font-size: 1.09rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}
.buttons .refresh {
  background: #6C757D;
}
.buttons .refresh:hover {
  background: #5f666d;
}
.buttons .copy {
  background: #8A6CFF;
}
.buttons .copy:hover {
  background: #704dff;
}

@media screen and (max-width: 432px) {
  .wrapper {
    padding: 25px 20px;
  }
  .row :where(.column, button) {
    width: calc(100% / 2 - 8px);
  }
  .options .select-box {
    padding: 8px 15px;
  }
  .options .palette  {
    margin-left: 40px;
  }
  .options .colors {
    display: flex;
    justify-content: space-between;
  }
  .palette input {
    width: calc(100% / 2 - 5px);
  }
  .palette input:last-child {
    margin-left: 0;
  }
}
    </style>

    <div class="wrapper">
      <div class="gradient-box"></div>
      <div class="row options">
        <div class="column direction">
          <p>Direction</p>
          <div class="select-box">
            <select>
              <option value="to top">Top</option>
              <option value="to right top">Right top</option>
              <option value="to right">Right</option>
              <option value="to right bottom">Right bottom</option>
              <option value="to bottom">Bottom</option>
              <option value="to left bottom">Left bottom</option>
              <option value="to left">Left</option>
              <option selected="" value="to left top">Left top</option>
            </select>
          </div>
        </div>
        <div class="column palette">
          <p>Colors</p>
          <div class="colors">
            <input type="color" value="#5665E9" />
            <input type="color" value="#A271F8" />
          </div>
        </div>
      </div>
      <textarea class="row" disabled="">background-image: linear-gradient(to left top, #977DFE,  #6878FF);</textarea>
      <div class="row buttons">
        <button class="refresh">Refresh Colors</button>
        <button class="copy">Copy Code</button>
      </div>
    </div>
        <script>
          const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");

const getRandomColor = () => {
    const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
    return `#${randomHex}`;
}

const generateGradient = (isRandom) => {
    if(isRandom) { 
        colorInputs[0].value = getRandomColor();
        colorInputs[1].value = getRandomColor();
    }
   
    const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
    gradientBox.style.background = gradient;
    textarea.value = `background: ${gradient};`;
}

const copyCode = () => {
    navigator.clipboard.writeText(textarea.value);
    copyBtn.innerText = "Code Copied";
    setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}

colorInputs.forEach(input => {
    input.addEventListener("input", () => generateGradient(false));
});

selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);
          </script> 

Bütün işlemler bu kadar herkese kolay gelsin.

DEMO SAYFASI