<!DOCTYPE html>
<html>
<head>
<title>Gradient fun</title>
</head>
<body>

<div class="app">
  <header>
    <div class="logo">COLOR<span>FLOW.</span></div>
    <p>A LITTLE COLOR EXPERIMENT</p>
  </header>

<main>
    <div class="preview" id="preview">
      <div class="preview-content">
        <span>YOUR GRADIENT</span>
        <h1>Make something beautiful.</h1>
        <p id="gradientCode">
          linear-gradient(135deg, #8b5cf6, #06b6d4)
        </p>
      </div>
    </div>

<div class="controls">
      <div class="control">
        <label for="color1">FIRST COLOR</label>
        <input type="color" id="color1" value="#8b5cf6">
      </div>

<div class="control">
        <label for="color2">SECOND COLOR</label>
        <input type="color" id="color2" value="#06b6d4">
      </div>

<div class="control angle-control">
        <label for="angle">ANGLE <span id="angleValue">135°</span></label>
        <input type="range" id="angle"
               min="0" max="360" value="135">
      </div>

<div class="buttons">
        <button id="randomBtn">✦ Randomize</button>
        <button id="copyBtn">Copy CSS</button>
      </div>
    </div>
  </main>

<footer>
    MADE WITH COLOR & CURIOSITY
  </footer>
</div>

</body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #101116;
  color: #fff;
  font-family: Arial, sans-serif;
}

.app {
  max-width: 1050px;
  margin: auto;
  padding: 35px 24px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
}

.logo span {
  color: #a78bfa;
}

header p,
footer {
  color: #777985;
  font-size: 10px;
  letter-spacing: 2px;
}

.preview {
  min-height: 420px;
  border-radius: 22px;
  background: linear-gradient(
    135deg, #8b5cf6, #06b6d4
  );
  display: flex;
  align-items: flex-end;
  padding: 45px;
  transition: background .3s;
}

.preview-content {
  max-width: 550px;
}

.preview-content span {
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: bold;
}

.preview h1 {
  font-size: clamp(35px, 6vw, 65px);
  letter-spacing: -3px;
  line-height: 1.05;
  margin: 15px 0;
}

.preview p {
  font-family: monospace;
  font-size: 12px;
  background: #0004;
  display: inline-block;
  padding: 12px 15px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 22px;
  padding: 28px 0;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control label {
  font-size: 10px;
  color: #a4a6b2;
  letter-spacing: 1.5px;
}

input[type="color"] {
  width: 65px;
  height: 45px;
  padding: 4px;
  border: 1px solid #343642;
  background: #1d1f29;
  border-radius: 8px;
  cursor: pointer;
}

.angle-control {
  flex: 1;
  min-width: 140px;
}

.angle-control label {
  display: flex;
  justify-content: space-between;
}

input[type="range"] {
  width: 100%;
  accent-color: #a78bfa;
  cursor: pointer;
}

.buttons {
  display: flex;
  gap: 10px;
}

button {
  padding: 15px 20px;
  border: 0;
  border-radius: 9px;
  font-weight: bold;
  cursor: pointer;
}

#randomBtn {
  background: #a78bfa;
  color: #171126;
}

#copyBtn {
  background: #292b35;
  color: #fff;
}

button:hover {
  filter: brightness(1.15);
}

footer {
  border-top: 1px solid #292b35;
  padding-top: 25px;
  margin-top: 15px;
}

@media (max-width: 600px) {
  header p {
    display: none;
  }

.preview {
    min-height: 360px;
    padding: 25px;
  }

.preview h1 {
    letter-spacing: -2px;
  }

.buttons {
    width: 100%;
  }

.buttons button {
    flex: 1;
  }
}

const color1 = document.getElementById("color1");
const color2 = document.getElementById("color2");
const angle = document.getElementById("angle");
const preview = document.getElementById("preview");
const code = document.getElementById("gradientCode");
const angleValue = document.getElementById("angleValue");
const copyBtn = document.getElementById("copyBtn");

function getGradient() {
  return "linear-gradient(" +
    angle.value + "deg, " +
    color1.value + ", " +
    color2.value + ")";
}

function updateGradient() {
  const gradient = getGradient();

preview.style.background = gradient;
  code.textContent = gradient;
  angleValue.textContent = angle.value + "\u00B0";
}

function randomColor() {
  return "#" + Math.floor(
    Math.random() * 16777216
  ).toString(16).padStart(6, "0");
}

function randomize() {
  color1.value = randomColor();
  color2.value = randomColor();
  angle.value = Math.floor(Math.random() * 361);

updateGradient();
}

async function copyCSS() {
  const css = "background: " + getGradient() + ";";

try {
    await navigator.clipboard.writeText(css);
    copyBtn.textContent = "Copied!";
  } catch (error) {
    copyBtn.textContent = "Select CSS above";
  }

setTimeout(function () {
    copyBtn.textContent = "Copy CSS";
  }, 1600);
}

color1.addEventListener("input", updateGradient);
color2.addEventListener("input", updateGradient);
angle.addEventListener("input", updateGradient);

document.getElementById("randomBtn")
  .addEventListener("click", randomize);

copyBtn.addEventListener("click", copyCSS);

updateGradient();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground