AI CSS Animations

Glass Calculator

A frosted calculator with a recessed display and glass keys, over two slow orbs you can watch through the keypad. Keys brighten on hover and squash on press. Real buttons laid out with CSS grid.

Also known as: glassmorphism calculator html css, frosted calculator ui, ios calculator css.

12 × 8 = 96 128 × 40 5,120

HTML

<div class="gls-glass-calculator">
  <span class="gls-glass-calculator-orb gls-glass-calculator-orb-a" aria-hidden="true"></span>
  <span class="gls-glass-calculator-orb gls-glass-calculator-orb-b" aria-hidden="true"></span>
  <div class="gls-glass-calculator-body">
    <div class="gls-glass-calculator-screen">
      <span class="gls-glass-calculator-history">12 × 8 = 96</span>
      <span class="gls-glass-calculator-expr">128 × 40</span>
      <output class="gls-glass-calculator-result">5,120</output>
    </div>
    <div class="gls-glass-calculator-keys">
      <button class="gls-glass-calculator-fn" type="button">AC</button>
      <button class="gls-glass-calculator-fn" type="button" aria-label="Plus or minus">±</button>
      <button class="gls-glass-calculator-fn" type="button" aria-label="Percent">%</button>
      <button class="gls-glass-calculator-op" type="button" aria-label="Divide">÷</button>
      <button type="button">7</button>
      <button type="button">8</button>
      <button type="button">9</button>
      <button class="gls-glass-calculator-op" type="button" aria-label="Multiply">×</button>
      <button type="button">4</button>
      <button type="button">5</button>
      <button type="button">6</button>
      <button class="gls-glass-calculator-op" type="button" aria-label="Minus">−</button>
      <button type="button">1</button>
      <button type="button">2</button>
      <button type="button">3</button>
      <button class="gls-glass-calculator-op" type="button" aria-label="Plus">+</button>
      <button class="gls-glass-calculator-zero" type="button">0</button>
      <button type="button" aria-label="Decimal point">.</button>
      <button class="gls-glass-calculator-eq" type="button" aria-label="Equals">=</button>
    </div>
  </div>
</div>

CSS

.gls-glass-calculator {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 30%, #1e1b4b));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-calculator-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-calculator-orb-a {
  right: 3em;
  top: 0.8em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-calculator-float-a 8s ease-in-out infinite alternate;
}
.gls-glass-calculator-orb-b {
  left: 2.6em;
  bottom: 0.6em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-calculator-float-b 9s ease-in-out infinite alternate;
}
.gls-glass-calculator-body {
  display: grid;
  grid-template-columns: 6.8em auto;
  gap: 0.55em;
  padding: 0.55em;
  border-radius: 1.15em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-calculator-screen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.6em 0.65em 0.5em;
  border-radius: 0.75em;
  background: rgb(15 23 42 / 0.24);
  box-shadow: inset 0 0.1em 0.35em rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(255 255 255 / 0.2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gls-glass-calculator-history { margin-bottom: auto; font-size: 0.55em; opacity: 0.55; }
.gls-glass-calculator-expr { font-size: 0.66em; opacity: 0.8; }
.gls-glass-calculator-result {
  font-size: 1.55em;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gls-glass-calculator-result::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.85em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  animation: gls-glass-calculator-caret 1.1s steps(1) infinite;
}
.gls-glass-calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1.95em);
  grid-auto-rows: 1.3em;
  gap: 0.28em;
}
.gls-glass-calculator-keys button {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.75em;
  background: rgb(255 255 255 / 0.13);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.72em;
  font-weight: 600;
  cursor: pointer;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.gls-glass-calculator-keys .gls-glass-calculator-fn { background: rgb(255 255 255 / 0.3); }
.gls-glass-calculator-keys .gls-glass-calculator-op {
  background: color-mix(in srgb, var(--c) 72%, transparent);
  font-size: 0.9em;
}
.gls-glass-calculator-keys .gls-glass-calculator-eq {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  font-size: 0.9em;
}
.gls-glass-calculator-keys .gls-glass-calculator-zero {
  grid-column: span 2;
  place-items: center start;
  padding-left: 1.05em;
}
.gls-glass-calculator-keys button:hover { filter: brightness(1.3); }
.gls-glass-calculator-keys button:active {
  scale: 0.9;
  transition-duration: 0.08s;
}
.gls-glass-calculator-keys button:focus-visible { outline: 2px solid #fff; outline-offset: 0.12em; }
@keyframes gls-glass-calculator-float-a {
  to { transform: translate(-3.5em, 1.4em) scale(1.12); }
}
@keyframes gls-glass-calculator-float-b {
  to { transform: translate(3em, -2.2em) scale(0.9); }
}
@keyframes gls-glass-calculator-caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gls-glass-calculator, .gls-glass-calculator *, .gls-glass-calculator::before, .gls-glass-calculator::after, .gls-glass-calculator *::before, .gls-glass-calculator *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --gls-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --gls-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar glass effects

Glassmorphism Card
Glass Navbar
Glassmorphism Login Form
Frosted Glass Panel