<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glass Playground</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>

<div class="background">
    <div class="grid"></div>
  </div>

<main class="glass-card">

<h1>Glass Playground</h1>

<p class="subtitle">
      Move the slider and watch the glass become more or less translucent.
    </p>

<div class="preview">

<div class="background-label">
        LIQUID GLASS
      </div>

<div class="glass-content">
          <span>TRANSLUCENCY</span>
          <strong id="opacityValue">45%</strong>
        </div>

</div>

</div>

<div class="control">

<div class="control-header">
        <span>Translucency</span>
        <strong id="valueLabel">45%</strong>
      </div>

<div class="range-labels">
        <span>Solid</span>
        <span>Transparent</span>
      </div>

</div>

<div class="stats">

<div>
        <span>Opacity</span>
        <strong id="opacityStat">45%</strong>
      </div>

<div>
        <span>Material</span>
        <strong>Glass</strong>
      </div>

</div>

</main>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

display: flex;
  align-items: center;
  justify-content: center;

background: #111;
  color: white;
}

/* ==================================================
   BACKGROUND
================================================== */

.background {
  position: fixed;
  inset: 0;

overflow: hidden;

background-image:
    linear-gradient(
      rgba(8, 20, 35, 0.12),
      rgba(8, 20, 35, 0.40)
    ),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");

background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;

animation:
    backgroundMove 18s
    ease-in-out
    infinite
    alternate;
}

/* Slowly move the photograph */

@keyframes backgroundMove {

0% {
    background-position:
      45% 50%;
  }

100% {
    background-position:
      55% 50%;
  }

}

/* ==================================================
   SUBTLE GRID
================================================== */

.grid {
  position: absolute;
  inset: 0;

background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    );

background-size: 40px 40px;

opacity: 0.5;

mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 25%,
      black 75%,
      transparent
    );
}

/* ==================================================
   MAIN GLASS PANEL
================================================== */

.glass-card {

position: relative;

width: min(520px, calc(100vw - 40px));

padding: 42px;

border-radius: 28px;

/*
     Main glass effect
  */

background:
    rgba(255, 255, 255, 0.17);

backdrop-filter:
    blur(24px)
    saturate(130%);

-webkit-backdrop-filter:
    blur(24px)
    saturate(130%);

/*
     Glass border
  */

border:
    1px solid
    rgba(255, 255, 255, 0.30);

/*
     Depth
  */

box-shadow:
    0 30px 80px
      rgba(0, 0, 0, 0.35),

inset 0 1px 0
      rgba(255, 255, 255, 0.40),

inset 0 -1px 0
      rgba(255, 255, 255, 0.08);

z-index: 2;

}

/* Small highlight along top */

.glass-card::before {

content: "";

position: absolute;

top: 0;
  left: 10%;

width: 80%;
  height: 1px;

background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.55),
      transparent
    );

}

/* ==================================================
   ICON
================================================== */

.icon {

width: 50px;
  height: 50px;

display: flex;

align-items: center;
  justify-content: center;

border-radius: 14px;

background:
    rgba(255,255,255,0.16);

border:
    1px solid
    rgba(255,255,255,0.25);

box-shadow:
    inset 0 1px 0
      rgba(255,255,255,0.3);

font-size: 25px;

}

/* ==================================================
   HEADER
================================================== */

h1 {

margin:
    22px 0 8px;

font-size: 36px;

line-height: 1.1;

letter-spacing: -1.2px;

}

.subtitle {

margin: 0;

max-width: 420px;

color:
    rgba(255,255,255,0.72);

line-height: 1.5;

font-size: 14px;

}

/* ==================================================
   PREVIEW
================================================== */

.preview {

position: relative;

height: 180px;

margin:
    32px 0;

border-radius: 20px;

overflow: hidden;

/*
     Very transparent glass
     so background remains visible.
  */

background:
    rgba(255,255,255,0.07);

border:
    1px solid
    rgba(255,255,255,0.18);

}

/* Label behind floating card */

.background-label {

position: absolute;

left: 24px;
  top: 22px;

font-size: 10px;

letter-spacing: 2px;

color:
    rgba(255,255,255,0.65);

}

/* ==================================================
   FLOATING GLASS CARD
================================================== */

.floating-card {

position: absolute;

left: 50%;
  top: 50%;

transform:
    translate(-50%, -50%)
    rotate(-5deg);

width: 270px;

padding: 22px;

display: flex;

gap: 16px;

align-items: center;

border-radius: 18px;

/*
     JavaScript updates this value.
  */

background:
    rgba(255,255,255,0.45);

backdrop-filter:
    blur(24px);

-webkit-backdrop-filter:
    blur(24px);

border:
    1px solid
    rgba(255,255,255,0.42);

box-shadow:

0 20px 40px
      rgba(0,0,0,0.18),

inset 0 1px 0
      rgba(255,255,255,0.55);

transition:
    background 0.15s ease,
    backdrop-filter 0.15s ease;

}

/* ==================================================
   MINI ICON
================================================== */

.mini-icon {

width: 42px;
  height: 42px;

flex-shrink: 0;

display: flex;

align-items: center;
  justify-content: center;

border-radius: 12px;

background:
    rgba(255,255,255,0.28);

border:
    1px solid
    rgba(255,255,255,0.24);

font-size: 20px;

}

/* ==================================================
   CARD TYPOGRAPHY
================================================== */

.glass-content span {

display: block;

font-size: 10px;

letter-spacing: 1.5px;

color:
    rgba(255,255,255,0.65);

}

.glass-content strong {

display: block;

margin-top: 5px;

font-size: 24px;

}

/* ==================================================
   DECORATIVE CIRCLE
================================================== */

.preview-circle {

position: absolute;

width: 110px;
  height: 110px;

right: -25px;
  bottom: -35px;

border-radius: 50%;

background:
    rgba(255,255,255,0.14);

border:
    1px solid
    rgba(255,255,255,0.20);

backdrop-filter:
    blur(12px);

-webkit-backdrop-filter:
    blur(12px);

}

/* ==================================================
   SLIDER
================================================== */

.control-header {

display: flex;

justify-content: space-between;
  align-items: center;

margin-bottom: 16px;

font-size: 14px;

}

.control-header strong {

font-size: 18px;

}

/* Range */

input[type="range"] {

width: 100%;

height: 6px;

appearance: none;
  -webkit-appearance: none;

border-radius: 20px;

background:
    linear-gradient(
      to right,
      white 45%,
      rgba(255,255,255,0.20) 45%
    );

cursor: pointer;

}

/* Chrome / Safari thumb */

input[type="range"]::-webkit-slider-thumb {

appearance: none;
  -webkit-appearance: none;

width: 22px;
  height: 22px;

border-radius: 50%;

background: white;

border:
    3px solid
    rgba(255,255,255,0.55);

box-shadow:
    0 4px 14px
      rgba(0,0,0,0.30);

}

/* Firefox thumb */

input[type="range"]::-moz-range-thumb {

width: 22px;
  height: 22px;

border-radius: 50%;

background: white;

border:
    3px solid
    rgba(255,255,255,0.55);

box-shadow:
    0 4px 14px
      rgba(0,0,0,0.30);

}

/* Labels */

.range-labels {

display: flex;

justify-content: space-between;

margin-top: 8px;

font-size: 11px;

color:
    rgba(255,255,255,0.55);

}

/* ==================================================
   STATS
================================================== */

.stats {

display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 10px;

margin-top: 28px;

}

.stats div {

padding: 14px;

border-radius: 14px;

background:
    rgba(255,255,255,0.07);

border:
    1px solid
    rgba(255,255,255,0.12);

}

.stats span {

display: block;

font-size: 11px;

color:
    rgba(255,255,255,0.50);

margin-bottom: 5px;

}

.stats strong {

font-size: 15px;

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

.glass-card {

padding: 28px;

}

h1 {

font-size: 30px;

}

.stats {

grid-template-columns:
      1fr;

}

.preview {

height: 160px;

}

const slider =
  document.getElementById("opacitySlider");

const valueLabel =
  document.getElementById("valueLabel");

const opacityValue =
  document.getElementById("opacityValue");

const opacityStat =
  document.getElementById("opacityStat");

const blurStat =
  document.getElementById("blurStat");

const floatingCard =
  document.querySelector(".floating-card");

function updateGlass() {

const value =
    Number(slider.value);

/*
    Convert slider value into
    CSS alpha value.

45 -> 0.45
  */

const opacity =
    value / 100;

/*
    More translucency =
    slightly stronger blur.

5%  -> ~10px
    95% -> ~40px
  */

const blur =
    8 + (value * 0.35);

/*
    Update glass background
  */

floatingCard.style.background =
    `rgba(255, 255, 255, ${opacity})`;

/*
    Update backdrop blur
  */

floatingCard.style.backdropFilter =
    `blur(${blur}px)`;

floatingCard.style.webkitBackdropFilter =
    `blur(${blur}px)`;

/*
    Update numbers
  */

valueLabel.textContent =
    `${value}%`;

opacityValue.textContent =
    `${value}%`;

opacityStat.textContent =
    `${value}%`;

blurStat.textContent =
    `${Math.round(blur)}px`;

/*
    Update slider progress
  */

slider.style.background = `
    linear-gradient(
      to right,
      white ${value}%,
      rgba(255,255,255,0.20) ${value}%
    )
  `;

}

/*
  Update continuously
  while dragging
*/

slider.addEventListener(
  "input",
  updateGlass
);

/*
  Initial state
*/

updateGlass();

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